Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple select boxes in one form using one function

    Hi all,

    I am trying to have one JavaScript function, whereby I can have multiple select boxes in one form and am struggling to achieve my goal. It would be nice if the JavaScript function is generic so I could add more select boxes if needed.

    Any help would be much appreciated

    Thanks in advance
    J

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);
    
    function addOption(theSel, theText, theValue)
    {
      var newOpt = new Option(theText, theValue);
      var selLength = theSel.length;
      theSel.options[selLength] = newOpt;
    }
    
    function deleteOption(theSel, theIndex)
    { 
      var selLength = theSel.length;
      if(selLength>0)
      {
        theSel.options[theIndex] = null;
      }
    }
    
    function moveOptions(theSelFrom, theSelTo)
    {
      
      var selLength = theSelFrom.length;
      var selectedText = new Array();
      var selectedValues = new Array();
      var selectedCount = 0;
      
      var i;
      
      // Find the selected Options in reverse order
      // and delete them from the 'from' Select.
      for(i=selLength-1; i>=0; i--)
      {
        if(theSelFrom.options[i].selected)
        {
          selectedText[selectedCount] = theSelFrom.options[i].text;
          selectedValues[selectedCount] = theSelFrom.options[i].value;
          deleteOption(theSelFrom, i);
          selectedCount++;
        }
      }
      
      // Add the selected text/values in reverse order.
      // This will add the Options to the 'to' Select
      // in the same order as they were in the 'from' Select.
      for(i=selectedCount-1; i>=0; i--)
      {
        addOption(theSelTo, selectedText[i], selectedValues[i]);
      }
      
      if(NS4) history.go(0);
    }
    
    //-->
    </script>
    
    <form action="yourpage.asp" method="post">
    <table border="0">
    	<tr>
    		<td>
    			<select name="sel1" size="10" multiple="multiple">
    			<option value="1">Left1</option>
    			<option value="2">Left2</option>
    			<option value="3">Left3</option>
    			<option value="4">Left4</option>
    			<option value="5">Left5</option>
    			</select>
    		</td>
    		<td align="center" valign="middle">
    			<input type="button" value="--&gt;"
    			 onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
    			<input type="button" value="&lt;--"
    			 onclick="moveOptions(this.form.sel2, this.form.sel1);" />
    		</td>
    		<td>
    			<select name="sel2" size="10" multiple="multiple">
    			<option value="1">Right1</option>
    			<option value="2">Right2</option>
    			<option value="3">Right3</option>
    			<option value="4">Right4</option>
    			<option value="5">Right5</option>
    			</select>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			<select name="sel1" size="10" multiple="multiple">
    			<option value="1">Left1</option>
    			<option value="2">Left2</option>
    			<option value="3">Left3</option>
    			<option value="4">Left4</option>
    			<option value="5">Left5</option>
    			</select>
    		</td>
    		<td align="center" valign="middle">
    			<input type="button" value="--&gt;"
    			 onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
    			<input type="button" value="&lt;--"
    			 onclick="moveOptions(this.form.sel2, this.form.sel1);" />
    		</td>
    		<td>
    			<select name="sel2" size="10" multiple="multiple">
    			<option value="1">Right1</option>
    			<option value="2">Right2</option>
    			<option value="3">Right3</option>
    			<option value="4">Right4</option>
    			<option value="5">Right5</option>
    			</select>
    		</td>
    	</tr>
    </table>
    </form>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,961
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Your functions are already generic. You can have as many select boxes as you want because you're passing the select objects in the function.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Glen,

    The issue I have is the select boxes, when actually try to move the objects across from one box to the other they fail and I am not sure why.

    Could you help.

    Thanks
    J


  •  

    Posting Permissions

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