Results 1 to 4 of 4

Thread: Add/remove from list box

  1. #1
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Add/remove from list box

    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

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.

  3. #3
    Join Date
    Apr 2009
    Location
    India
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    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

  4. #4
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    @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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •