[jQuery] Convert one select with optgroups to two dynamic selects - approach advice

[mjpg]

I have written code to replace a form select with optgroups to two
dynamic selects. The optgroups create the options in the first select.
The second select is populated dynamically from the chosen optgroup in
the first select.

The reason for this approach is to allow the dynamic selects to
degrade to a usable long select with optgroups.

Having gotten the basic code to work, I decided to replace the
original (optgroup) select, so that the form would be submitted with
the same id/name/data.

However, once I did this, as the optgroups have been replaced - they
are no longer available to read from and the dynamic select is broken.

So - what is the best approach to storing the original optgroup
options so I can read them on each change of the group select?

I guess I can clone the select and hide, but that seems clunky.

Note - I'm new to this and the JS code below will seem poor to most of
you.

Thanks


HTML: ##########################

<form name="form1" method="post" action="">
        <select id="courses">
                <option value="">Please select</option>
                <optgroup label="General Courses">
                        <option value="">Effective Communication</option>
                        <option value="">Equalities Training for 
Managers</option>
                        <option value="">Loss and Bereavement)</option>
                </optgroup>
                <optgroup label="Practice Learning">
                        <option value="">Managing Practice Learning</option>
                        <option value="">Support and Development 
Sessions</option>
                        <option value="">First Aid at Work</option>
                </optgroup>
                <optgroup label="New Starters">
                        <option value="">Welcome Day</option>
                        <option value="">Fair Selection and Recruitment</option>
                        <option value="">Supervision Skills</option>
                </optgroup>
        </select>
</form>

JS: ##########################

// File converts an optgroup select into two dynamic selects

// config
var targetSelectID = "courses";  // id of select to change
var groupFirstOption  = "Select a topic"  // Text to show in first
option of groups select

function populateSelect(chosenValueStr) {
        var chosenValue = Number(chosenValueStr);

        // Get the optgroup options
        var chosenOptions = $('#'+targetSelectID+' optgroup:eq('+chosenValue
+') option');
        var arrayLength = $(chosenOptions).length;  // for debugging
        var newOptionsHTML='<option value="">Please select ['+chosenValue+']
LENGTH ['+arrayLength+']</option>'; // for debugging

        chosenOptions.each( function() {
                optionsText = $(this).html();
                newOptionsHTML+='<option 
value="'+optionsText+'">'+optionsText+'</
option>';
        });

        $('#'+targetSelectID).empty();
        $('#'+targetSelectID).append(newOptionsHTML);
}

$(document).ready(function(){
        // Get the optgroup labels
        var groups = $('#'+targetSelectID+' optgroup');

        // create the select for this
        var groupsHTML = '<select id="groups"
onChange="populateSelect(this.options[selectedIndex].value)">';
        groupsHTML+='<option value="">'+groupFirstOption+'</option>';

        var n=0; // counter
        groups.each( function() {
                optionText = $(this).attr("label");
                groupsHTML+='<option value="'+n+'">'+optionText+'</option>';
                n++;
        });

        groupsHTML += '</select>';

        // get the first set of choices
        var chosenOptions = $('#'+targetSelectID+' optgroup:eq(0) option');

        //var optionsHTML='<option value="">Please select a course</option>';

        var optionsHTML='';

        chosenOptions.each( function() {
                optionsText = $(this).html();
                optionsHTML+='<option value="'+optionsText+'">'+optionsText+'</
option>';
        });

        // clear the original select and add in the new
        $('#'+targetSelectID).empty();
        $('#'+targetSelectID).append(optionsHTML);

        // add in the group select and set to first choice
        $('#'+targetSelectID).before(groupsHTML);
        $('#groups option:first-child').attr("selected","selected");

});