user472285 user472285 - 1 month ago 11
jQuery Question

group select options in javascript or jQuery

i was wondering if it would be possible to group options in select dropdown

so if i select first option, first sub option 1 and first sub option 2 would be populated in the second select dropdown

an example here: http://jsfiddle.net/atoswchataigner/7ThYY/

<!-- RUBRIQUE -->
<select class="ms-RadioText" title="Rubrique" id="ctl00_DropDownChoice" name="ctl00$DropDownChoice">
<option value="" selected="selected"></option>
<option value="first option">first option</option>
<option value="second option">second option</option>
</select>

<!-- SOUS/RUBRIQUE -->
<select class="ms-RadioText" title="Sous-Rubrique" id="ctl00_DropDownChoiceSub" name="ctl00$DropDownChoiceSub" disabled="">
<option value="" selected="selected"></option>
<option value="first sub option 1">first sub option 1</option>
<option value="first sub option 2">first sub option 2</option>
<option value="second sub option 1">second sub option 1</option>
<option value="second sub option 2">second sub option 2</option>
</select> ​

//first option
//first sub option 1
//first sub option 2

//second option
//second sub option 1
//second sub option 2

//replace spaces with _ in values
jQuery(".ms-RadioText > option").each(function () {
jQuery(this).attr("value", jQuery(this).attr("value").replace(/ /g, "_"));
});​

Answer Source

This requires a bit of jQuery handywork to do, but I believe this will demonstrate what you're looking for: http://jsfiddle.net/7ThYY/39/

Your new HTML:

<!-- RUBRIQUE -->
    <select class="ms-RadioText" title="Rubrique" id="ctl00_DropDownChoice" name="ctl00$DropDownChoice">
            <option value="" selected="selected"></option>
            <option class='first' value="first option">first option</option>
            <option class='second' value="second option">second option</option>        
    </select> 

    <!-- SOUS/RUBRIQUE -->
    <select class="ms-RadioText" title="Sous-Rubrique" id="ctl00_DropDownChoiceSub" name="ctl00$DropDownChoiceSub" disabled>
            <option value="" selected="selected"></option>
            <option class='first' value="first sub option 1">first sub option 1</option>
            <option class='first' value="first sub option 2">first sub option 2</option>
            <option class='second' value="second sub option 1">second sub option 1</option>
            <option class='second' value="second sub option 2">second sub option 2</option>

​ and new jQuery

$('#ctl00_DropDownChoice').change(function(){

    //Determine what class the first option is    
    var type = $('option:selected', this).attr('class');

    //enable the second select box
    $('#ctl00_DropDownChoiceSub').removeAttr('disabled');
    $('#ctl00_DropDownChoiceSub option').each(function(){
        //Go through each option and determine if it's the same type as the first box. If not, add it to a div that will hold options not being used
        if( $(this).attr('class') != type )
        {
            $('#optionholder').append( $(this) );
        }
    });

    //Also loop through the div holding the unused options and see if there are any in there that we need
    $('#optionholder option').each(function(){
        if( $(this).attr('class') == type )
        {
            $('#ctl00_DropDownChoiceSub').append( $(this) );
        }
    })
});​