473,320 Members | 1,900 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Moving options between two select box lists, with optgroups

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
1 5021
pbmods
5,821 Expert 4TB
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

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

Similar topics

0
by: Simon Finn | last post by:
Hi I have used ASP code to load data into two select boxes. The code below is used to move the selected data back and forth between the boxes. I am having problems retreving the data from the...
10
by: Ryan McGeary | last post by:
In a <select> drop-down, the onchange event isn't called when scrolling through the dropdown using the mouse-wheel and when crossing over a new <optgroup>. Using the example below, notice how...
7
by: John C | last post by:
I am working with an HTML-based form that uses a select element that requires about 200 options. Is there a way that I can load, or select one of these options from a file, rather than hardcode...
2
by: ashkaan57 | last post by:
Hi, I have two listboxes and want to move a set of selcted items from the listbox on the left moved to the listbox on the right when a button is pressed: function RightButton_OnClick() {...
3
by: Stewart | last post by:
Dear comp.lang.javascript, I have more than once wanted to manipulate the contents of select boxes dynamically, whilst the boxes contain <optgroup> tags. Manipulation of a select box containing...
3
by: Tony Kim | last post by:
Hi everyone, i have an assignment that needs immediate attention and was hoping i would be able to get some help here. im trying to create 3 option boxes that are linked together. for...
3
by: Michael . | last post by:
I am trying to move a postgresql database from one server to another. The original server is 7.1.3, and the new one is 7.3.4. I went on the old and used the command: pg_dumpall > dump On...
16
by: Brian D | last post by:
I have a multiple select list that is created dynamically based on a previous selection on an asp page. The first thing I do is to clear the curent option list by ...
1
by: madflytom | last post by:
Hello again all. I posted a question last night about dealing with <optgroups> in select boxes. We've changed directions, and now I need a little more help. Here's the scenario: Two select...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.