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

Question

In the html code I have select options like this:

  <option value="1" class="myclass5">Value1</option>

In jQuery:

var cod = $(this).val(); // This is the value of another select: when the value 
$("option[class^=myclass]").hide();
$("option[class^=myclass]").each(function () {
    $("option[class^=myclass" + cod + "]").show();
});

EDIT

I have two select. When I select a value in the first select, the second one must be populated accordingly (I have to prevent an ajax call).

I put all the second select values in a session var, but my problem is in selecting only those ones tied to the first select, so I was trying through css classes.

EDIT2

<select name="firstselect">
   <option value="0" selected="selected">Choose...</option>
   <option value="1">Value1</option>
   <option value="2">Value2</option>
   <option value="3">Value3</option>
</select>

<select name="secondselect">
   <option value="0" selected="selected">Choose...</option>
   <option value="myclass1">Value11</option>
   <option value="myclass1">Value12</option>
   <option value="myclass1">Value13</option>
   <option value="myclass2">Value21</option>
   <option value="myclass2">Value22</option>
   <option value="myclass2">Value23</option>
   <option value="myclass3">Value31</option>
   <option value="myclass3">Value32</option>
   <option value="myclass3">Value33</option>
</select>

EDIT3

For me greenish's solution is good, but there is an issue on IE that I don't succeed in explaining: when I use the back button, the user selected value is "lost", that is, if I log on the console the user selected value, I see its "index" in the new cloned select. In the html source code, there is the whole original select.

EDIT4

I resolved thanks to this post

https://forum.jquery.com/topic/jquery-select-box-selectedindex-problems-in-internet-explorer-ie-on-refresh-and-back-buttons

Answer 1

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/