jQuery and css: hide/show select options with a certain css class

css, html-select, jquery, show-hide

Solution

So when I understand your question correctly, you want to make the options of the second select field dependent of the selected value in the first select field.

I tried this quickly and hiding an option with css does not seem to work cross browser, even the latest version of chrome on mac won't hide the options.

So I came up with the following:

HTML first: I used classes to mark the dependencies. This allows the `value` attribute in the second select field to be used without restrictions.

Also, only options marked as `conditional` will be changed, the others won't be affected. This is useful for something like the Default value in this scenario.

<select id="firstSelect">
   <option value="0" selected="selected">Choose...</option>
   <option value="value1">Value1</option>
   <option value="value2">Value2</option>
   <option value="value3">Value3</option>
</select>

<select id="secondSelect">
   <option value="0" selected="selected">Choose...</option>
   <option class="conditional value1" value="subValue1">Value1: Sub1</option>
   <option class="conditional value2" value="subValue2">Value2: Sub1</option>
   <option class="conditional value2" value="subValue3">Value2: Sub2</option>
   <option class="conditional value2" value="subValue4">Value2: Sub3</option>
   <option class="conditional value2" value="subValue5">Value2: Sub4</option>
   <option class="conditional value2" value="subValue6">Value2: Sub5</option>
   <option class="conditional value3" value="subValue7">Value3: Sub1</option>
   <option class="conditional value3" value="subValue8">Value3: Sub2</option>
   <option class="conditional value3" value="subValue9">Value3: Sub3</option>
</select>

And the Javascript: To make this work, I copied the options of the `secondSelect` field and saved them in a variable. This allows me to actually `remove` options from the select field while I'm still able to retrieve the options from the copy.

$(function(){
    var conditionalSelect = $("#secondSelect"),
        // Save possible options
        options = conditionalSelect.children(".conditional").clone();

    $("#firstSelect").change(function(){
        var value = $(this).val();
        // Remove all "conditional" options               
        conditionalSelect.children(".conditional").remove();
        // Attach options that needs to be displayed for the selected value.
        options.clone().filter("."+value).appendTo(conditionalSelect);
    }).trigger("change");
});

And here's a fiddle that shows the script in action: http://jsfiddle.net/Kn8Gc/

Note: If you get Data form a database and the user already selected #firstSelect, just use the `selected="selected"` attribute. #secondSelect will automatically display the correct values. Just try the fiddle above and "preselect" for example value1 instead of 0!

Also here's a "generic" function that can be used easily to make any two select fields dependent on eachother (still using the classes `conditional`+ `source value` to make the relation):

// "Generic" function
$.conditionalize = function(sourceSelect, conditionalSelect){
    var options = conditionalSelect.children(".conditional").clone();

    sourceSelect.change(function(){
        var value = $(this).val();                  
        conditionalSelect.children(".conditional").remove();
        options.clone().filter("."+value).appendTo(conditionalSelect);
    }).trigger("change");
}

// Used like this:
$.conditionalize($("#firstSelect"), $("#secondSelect"));

And here it is in action: http://jsfiddle.net/NUxQ9/

Problem

Original source