group select options in javascript or jQuery

Question

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, "_"));
        });

score 0 · Accepted Answer · answered Apr 27 '12 at 09:23

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) );
        }
    })
});

Tats_innit · Answer 2 · 2017-08-21T02:04:30.263

Hiya demo here 2 demos:

1) items to hide/show http://jsfiddle.net/DPBPC/ (I reckon this one is what you are looking for)

2) && using disabled property here: http://jsfiddle.net/Y87k5/

How about this one with less code and complexity.

Please see here for some nice comments: Hide select option in IE using jQuery "about removing the elements" etc... or style.display='none' doesn't work on option tags in chrome, but it does in firefox

extra Info Also please note that its a known bug in select hide : http://bugs.jquery.com/ticket/1100 (but anyhow your issue is resolved :))

Jquery code using hide/show item here

//replace spaces with _ in values
jQuery(".ms-RadioText > option").each(function() {

    jQuery(this).attr("value", jQuery(this).attr("value").replace(/ /g, "_"));
});

$('#ctl00_DropDownChoice').change(function() {
    var sel = $(this).val();

    var selCompare = (sel.indexOf('first') != -1) ? "first" : "second";

    if ($(this).val() == "") return false;

    $("#ctl00_DropDownChoiceSub").removeAttr("disabled");

    $('#ctl00_DropDownChoiceSub > option').each(function() {

        if (!($(this).val().indexOf(selCompare) != -1)) {
            $(this).wrap('<span>').hide()
        }

    });

    $('#ctl00_DropDownChoiceSub > span > option').each(function() {

        if (($(this).val().indexOf(selCompare) != -1)) {
            $(this).unwrap("span").show()
        }


    });
});

Jquery code using disable

 //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, "_"));
});

$('#ctl00_DropDownChoice').change(function(){
    var sel = $(this).val();

    var selCompare = (sel.indexOf('first') != -1) ? "first" : "second";   

   if( $(this).val() == ""   )
       return false;

       $("#ctl00_DropDownChoiceSub").removeAttr("disabled");  

      $('#ctl00_DropDownChoiceSub > option').each(function(){

         if( !($(this).val().indexOf(selCompare) != -1) )
        {
           $(this).attr("disabled","disabled");
        }else{
             $(this).removeAttr("disabled");
        }

    });

});

group select options in javascript or jQuery

2 Answers2