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
    11,068
    Thanks
    0
    Thanked 256 Times in 252 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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #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
    •