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

Code:

<!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.....

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

Thread: Add/remove from list box

Thread Tools

Search Thread

Add/remove from list box

Bookmarks

Bookmarks

Posting Permissions