Unobtrusive connected select boxes – yet another solution approachSaturday, March 17th, 2007 at 12:54 am
Update: the second demo now allows for preselect states and shows the first dropdown enjoy.
All we need now to turn this into connected select boxes is the folllowing:
- Create a new select element
- Loop through all optgroups and create a new select box for each and hide them
- Loop through the options collection of each optgroup
- Take the first option and add it to the new main select element
- Move the other options to the select box connected with this optgroup
- Apply an onchange handler that reads the selectedIndex value of the main select element and shows the select box with the same number, hiding the previous one
- Apply the correct secondary name to the currently shown select box
- Remove the original select box
- Apply the name and ID of the original to the new main select box
Another option is of course to store the data in an object and re-populate the secondary select box every time the first is changed. However, I wanted to avoid that to speed things up.
Check out the example of this technique and tell me what you think.