PDA

View Full Version : Add/remove from list box



premtemp
04-09-2009, 01:14 AM
Hello,
I have 2 list box on a screen. The first box is populated with PHP. I have some button (add, remove). When the button is press it take the select element from list_1 and put it in list_2.

Does anyone have some javascript that will do it?

Thanks in advance for your help

codeexploiter
04-09-2009, 06:47 AM
Here is an example code that illustrates what you are looking for



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>New Document</title>
<style type="text/css">
</style>
</head>
<body>
<form name="f1">
<select name="select1" id="s1" style="float:left">
<option value="1">Select List 1 - Value1</option>
<option value="2">Select List 1 - Value2</option>
<option value="3">Select List 1 - Value3</option>
<option value="4">Select List 1 - Value4</option>
<option value="5">Select List 1 - Value5</option>
</select>
<select name="select2" id="s2" style="float:left">
<option value="11">Select List 2 - Value1</option>
<option value="22">Select List 2 - Value2</option>
<option value="33">Select List 2 - Value3</option>
<option value="44">Select List 2 - Value4</option>
<option value="55">Select List 2 - Value5</option>
</select>
<div style="clear: both;">
</div>
<input type="button" name="s1Add" value="Add" /><input type="button" name="s1Remove" value="Remove" /><input type="button" name="s2Add" value="Add" style="margin-left: 25px;"/><input type="button" name="s2Remove" value="Remove" />
</form>
<script type="text/javascript">
//Select list 1's Add button's onclick event handling.
//This will remove the currently selected item from the select 2 and put the same in select 1
document.forms['f1'].elements['s1Add'].onclick = function(){
var s2 = document.forms['f1'].elements['s2'];
var s1 = document.forms['f1'].elements['s1'];

var si = s2.selectedIndex;
var s2val = s2.options[si].value;
var s2txt = s2.options[si].text;

s1.options[s1.options.length] = new Option(s2txt, s2val, false, true);
s2.remove(si);
}
//Select list 2's Add button's onclick event handling
//This will remove the currently selected item from the select 1 and put the same in select 2
document.forms['f1'].elements['s2Add'].onclick = function(){
var s2 = document.forms['f1'].elements['s2'];
var s1 = document.forms['f1'].elements['s1'];

var si = s1.selectedIndex;
var s1val = s1.options[si].value;
var s1txt = s1.options[si].text;

s2.options[s2.options.length] = new Option(s1txt, s1val, false, true);
s1.remove(si);
}
//Select list 1's remove button's onclick event handling
//This will remove the currently selected item from select list 1
document.forms['f1'].elements['s1Remove'].onclick = function(){
var s1 = document.forms['f1'].elements['s1'];
s1.remove(s1.selectedIndex);
}
//Select list 2's Add button's onclick event handling
//This will remove the currently selected item from select list 2
document.forms['f1'].elements['s2Remove'].onclick = function(){
var s2 = document.forms['f1'].elements['s2'];
s2.remove(s2.selectedIndex);
}
</script>
</body>
</html>



Hope this helps.

amutha
04-10-2009, 07:17 AM
Here example of code.....


<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY onload="SortAllItems();">
<TABLE>
<TR>
<TD> <select size="5" name="lstBox" id="lstBox">
<option value="A">A</option>
<option value="D">D</option>
<option value="C">C</option>
<option value="E">E</option>
<option value="B">B</option>

</select>
</TD>
<TD> <input name="add" type="button" value="Add" onclick="FirstListBox();" /> <input name="remove" type="button" value="Remove" onclick="SecondListBox();"/></TD>
<TD>
<select size="5" name="ListBox1" id="ListBox1">

</select>
</TD>
</TABLE>
</BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--
function SecListBox(ListBox,text,value)
{
try
{
var option=document.createElement("OPTION");
option.value=value;
option.text=text;
ListBox.options.add(option)
}
catch(er)
{
alert(er)
}
}
function FirstListBox()
{
try
{
var count=document.getElementById("lstBox").options.length;
for(i=0;i<count;i++)
{
if(document.getElementById("lstBox").options[i].selected)
{
SecListBox(document.getElementById("ListBox1"),document.getElementById("lstBox").options[i].value,document.getElementById("lstBox").options[i].value);document.getElementById("lstBox").remove(i);
break
}
}
}
catch(er)
{
alert(er)
}
}
function SortAllItems()
{
var arr=new Array();
for(i=0;i<document.getElementById("lstBox").options.length;i++)
{
arr[i]=document.getElementById("lstBox").options[i].value}arr.sort();
RemoveAll();
for(i=0;i<arr.length;i++)
{
SecListBox(document.getElementById("lstBox"),arr[i],arr[i])}}function RemoveAll(){try{document.getElementById("lstBox").options.length=0
}
catch(er)
{
alert(er)
}
}
function SecondListBox()
{
try
{
var count=document.getElementById("ListBox1").options.length;
for(i=0;i<count;i++)
{
if(document.getElementById("ListBox1").options[i].selected){SecListBox(document.getElementById("lstBox"),document.getElementById("ListBox1").options[i].value,document.getElementById("ListBox1").options[i].value);document.getElementById("ListBox1").remove(i);
break
}
}
SortAllItems()
}
catch(er)
{
alert(er)
}
}
//-->
</SCRIPT>
</HTML>


It may use for you :)

leupi
06-09-2009, 07:58 PM
@amutha

Your code is very close to what I need but I am having some small issues and I was wondering if you could point me in the right direction.

The 1stBox is populated by the contents of the value attribute and not the text that is between the <option> tags. For about a second the desired text is there but it then is replaced by the contents of the value attribute. I am very JavaScript challenged and am not having much luck sorting through the code trying to figure out why. Any help would be appreciated.

Thanks,
Todd