Question

I am attempting to show drop down options in a second selection drop down menu based off the selection made on the first drop down menu. In this example, the first drop down menu has 3 selections each with their own unique class. The second dropdown menu has several drop down options with class values that match the class values from the first drop down. By default, the 2nd drop down options are hidden until the user chooses a drop down option from the first selection. My goal is that once the user makes there selection from the first drop down option, to then add a class of “display_block” to the options in the 2nd drop down menu that have the same class value made from the selection in the first drop down box.

Here is the HTML:

<label class="label_bra_band_size">
<span class="store_level_3_brasize">Band Size</span></label>
<select id="product_band_size" name="band_size">
<option value="">Select Band Size</option>
<option value="32" class="a293">32</option>
<option value="34" class="a310">34</option>
<option value="36" class="a323">36</option>
</select>

<label class="label_cup_size">
<span class="store_level_3_brasize">Cup Size</span></label>
<select id="product_cup_size" name="cup_size">
<option value="">Select Cup Size</option>
<option value="A" class="a293" style="display:none;">A</option>
<option value="B" class="a293" style="display:none;">B</option>
<option value="C" class="a293" style="display:none;">C</option>
<option value="D" class="a310" style="display:none;">D</option>
<option value="E" class="a310" style="display:none;">E</option>
<option value="F" class="a310" style="display:none;">F</option>
<option value="G" class="a323" style="display:none;">G</option>
<option value="H" class="a323" style="display:none;">H</option>
<option value="I" class="a323" style="display:none;">I</option>
</select>

Here is the jQuery below. Here’s my logic in the jQuery: when someone makes a selection from the first option, we store the selection class in a variable (ProductBandSize). Then in the 2nd part we compare the options in the 2nd drop down against the variable value. If the 2nd dropdown option has the same class as the variable, add a class of “display_block”. Unfortunately all the options in the 2nd drop down class are getting the class value of “display_block”.

<script type="text/javascript">
$(function(){
  $("#product_band_size").change(function(){
    //When the user changes the Band size, get the Cup Size and assign it to a variable
    var ProductBandSize = $("#product_band_size option:selected").attr("class");
    //Compare the Product Cup Size options against the variable "ProductBandSize"
    if ($("#product_cup_size option").hasClass(ProductBandSize)) {
        //If the product cup size option has the same class value as the first option selected add class display_block to it.
        $("#product_cup_size option").addClass("display_block");
    }
  });
});
</script>

Answer 1

You should use filter to find the matching option which has that class and then add the class. hasClass will only say true/false if the class is present or not. Try this

$("#product_band_size").change(function(){
    //When the user changes the Band size, get the Cup Size and assign it to a variable
    var ProductBandSize = $("#product_band_size option:selected").attr("class");
    //Compare the Product Cup Size options against the variable "ProductBandSize"

    $("#product_cup_size option").filter("."+ProductBandSize).addClass("display_block");

  });