By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,412 Members | 1,006 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,412 IT Pros & Developers. It's quick & easy.

Moving options between two select box lists, with optgroups

P: 2
Hello,

I'm trying to move the options of one select list to another select list. The "source" select list is divided into optgroups, and the "target" select list is not. I want to somehow keep track of the moved option's optgroup, so that if I remove it from the "target" select list, it moves back into it's respective optgroup in the "source" select list.

I have things moving back and forth, but I'm not sure how to handle the optgroup tracking. Here's basically what I have:
Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/javascript">
  2.     function MoveOption(objSourceElement, objTargetElement)
  3.     {
  4.         var aryTempSourceOptions = new Array();
  5.         var x = 0;
  6.  
  7.         //looping through source element to find selected options
  8.         for (var i = 0; i < objSourceElement.length; i++) {
  9.             if (objSourceElement.options[i].selected) {
  10.                 //need to move this option to target element
  11.                 var intTargetLen = objTargetElement.length++;
  12.                 objTargetElement.options[intTargetLen].text = objSourceElement.options[i].text;
  13.                 objTargetElement.options[intTargetLen].value = objSourceElement.options[i].value;
  14.             }
  15.             else {
  16.                 //storing options that stay to recreate select element
  17.                 var objTempValues = new Object();
  18.                 objTempValues.text = objSourceElement.options[i].text;
  19.                 objTempValues.value = objSourceElement.options[i].value;
  20.                 aryTempSourceOptions[x] = objTempValues;
  21.                 x++;
  22.             }
  23.         }
  24.  
  25.         //resetting length of source
  26.         objSourceElement.length = aryTempSourceOptions.length;
  27.         //looping through temp array to recreate source select element
  28.         for (var i = 0; i < aryTempSourceOptions.length; i++) {
  29.             objSourceElement.options[i].text = aryTempSourceOptions[i].text;
  30.             objSourceElement.options[i].value = aryTempSourceOptions[i].value;
  31.             objSourceElement.options[i].selected = false;
  32.         }
  33.     }
  34.  
and the body:
Expand|Select|Wrap|Line Numbers
  1. <table><tr><td>
  2. <select name="Enabled1" id="Enabled1" size="20" multiple
  3.                             style="width: 300px;">
  4. <optgroup label="Option Group 1">
  5. <option value="Value1">Option1</option>
  6. <option value="Value2">Option2</option>
  7.                             </optgroup>
  8. </select>
  9. </td><td>
  10. <input type="button" name="add" value="&nbsp;&nbsp;&nbsp; add -&gt; " style="width: 100px;"
  11.                             onclick="MoveOption(this.form.Enabled1, this.form.Disabled1)"><br />
  12.                         <input type="button" name="remove" value=" &lt;- remove &nbsp;&nbsp;&nbsp;" style="width: 100px;"
  13.                             onclick="MoveOption(this.form.Disabled1, this.form.Enabled1.)">
  14. </td>
  15. <td>
  16. <select name="Disabled1" id="Disabled1" size="20" multiple style="width: 300px;">
  17.                         </select>
  18. </td></tr></table>
  19.  
Thanks!
Aug 28 '07 #1
Share this Question
Share on Google+
1 Reply


pbmods
Expert 5K+
P: 5,821
Heya, Tom.

Here's how I do it:
Expand|Select|Wrap|Line Numbers
  1. .
  2.         /**
  3.         *
  4.         *    selSwap()
  5.         *
  6.         *    Swaps sets of recipients between two SELECTs.
  7.         *
  8.         *    @param string $from Move OPTIONs from the SELECT with this id...
  9.         *    @param string $to ...to the SELECT with this id.
  10.         *
  11.         *    @return void
  12.         *
  13.         *    @since Tuesday, July 24, 2007
  14.         */
  15.         function selSwap($from, $to)
  16.         {
  17.             $from = document.getElementById($from);
  18.             $to = document.getElementById($to);
  19.  
  20.             for( var $i = 0; $i < $from.options.length; ++$i )
  21.             {
  22.                 if( $from.options[$i].selected )
  23.                 {
  24.                     $from.options[$i].selected = false;
  25.                     $to.appendChild($from.removeChild($from.options[$i]));
  26.                     --$i;
  27.                 }
  28.             }
  29.         }
  30.  
This code moves selected options in between select elements, which sounds similar to what you're trying to accomplish.

Note this line:
Expand|Select|Wrap|Line Numbers
  1. $to.appendChild($from.removeChild($from.options[$i]));
  2.  
Element::removeChild() removes the node from its parent and returns it. In this case, it immediately gets passed to Element::appendChild(), which adds it to the other element.
Aug 29 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.