0

I am using the jQuery not() method to hide option elements in the second select list if the class is not the same as the class of the option selected in the first select list.

Here is my jQuery code which works in FF but not Chrome or Safari (have not checked IE yet). I am somewhat new to this so there is probably a simple fix or easier way to accomplish. Thanks.

$('#formcategory').on('change', function() {
    var selected = $('#formcategory :selected').attr("class");
    $('#formsubcategory').find('option').not("."+selected).hide();
});

<select id="formcategory" name="Category">
    <option value="Select One">Select One</option>
    <option class="BloodSample" value="1">Blood Sample</option>
    <option class="Exercise" value="2">Exercise</option>
    <option class="InsulinInjection" value="3">Insulin Injection</option>
    <option class="Meal" value="4">Meal</option>
    <option class="Symptoms" value="5">Symptoms</option>
    <option class="UrineSample" value="6">Urine Sample</option>
</select>

<label id="lblsubcategory" for="formsubcategory" style="display: inline;">Subcategory</label>
<select id="formsubcategory" name="Subcategory" style="display: block;">
    <option selected="selected" value="Select One" style="display: none;">Select One</option>
    <option class="Symptoms" value="51">Lethargy</option>
    <option class="Symptoms" value="52">Vomiting</option>
    <option class="Symptoms" value="53">Diarrhea</option>
    <option class="Symptoms" value="54">Seizures</option>
    <option class="Symptoms" value="55">Missed Meal</option>
    <option class="Symptoms" value="56">Poor Appetite</option>
    <option class="Symptoms" value="57">Excessive Drinking</option>
    <option class="Symptoms" value="58">Excessive Urination</option>
    <option class="UrineSample" value="61" style="display: none;">Positive - Glucose</option>
    <option class="UrineSample" value="62" style="display: none;">Negative - Glucose</option>
    <option class="UrineSample" value="63" style="display: none;">Positive - Ketones</option>
    <option class="UrineSample" value="64" style="display: none;">Negative -Ketones</option>
</select>
user2232681
  • 839
  • 4
  • 16
  • 33

1 Answers1

2

You never show the elements, you just hide them :

$('#formcategory').on('change', function() {
    var selected = $('#formcategory :selected').prop("class");
    if (selected.length) $('#formsubcategory option').show().not('.'+selected).hide();
});

FIDDLE

EDIT:
added a check for empty className to avoid errors when reselecting the first option!

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • This still doesn't work in Chrome/Safari. Here is one possible solution: http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css – Juri Glass Nov 01 '13 at 13:54
  • @JuriGlass - The fiddle seems to work fine for me in Chrome ? – adeneo Nov 01 '13 at 14:17
  • the fiddle is not hidding any option elements in the #formsubcategory select list, for me anyway. I am going to look at the possible solution suggested by Juri Glass. – user2232681 Nov 01 '13 at 14:44