jQuery: how to choose options in another selection based off a class in the first selection -

Trying to show drop down options in the second selection drop down menu based on the selection I made on the first drop down menu I am In this example, 3 are selected with each of the first drop down menus, which are of their own unique class. There are several drop down options with the class value in the second dropdown menu which matches the class values ​​from the first drop down. By default, the second drop down option is hidden until the user chooses the first drop down option of selection. My goal is that once the user selects from the first drop down option, then to add a square of "display_block" in the second drop down menu, which is the same class value from the selection in the first drop down box.

Here's HTML:

  & lt; Label class = "label_bra_band_size" & gt; & Lt; Span class = "store_level_3_brasize" & gt; Band size & lt; / Span & gt; & Lt; / Label & gt; & Lt; Select id = "product_band_size" name = "band_size" & gt; & Lt; Option value = "" & gt; Select Band size & lt; / Option & gt; & Lt; Option value = "32" square = "A293"> 32 & lt; / Options & gt; & Lt; Option value = "34" square = "A310"> 34 & lt; / Options & gt; & Lt; Option value = "36" square = "A332"> 36 & lt; / Options & gt; & Lt; / Select & gt; & Lt; Label class = "label_cup_size" & gt; & Lt; Span class = "store_level_3_brasize" & gt; Cup size & lt; / Span & gt; & Lt; / Label & gt; & Lt; Select id = "product_cup_size" name = "cup_size" & gt; & Lt; Option value = "" & gt; Choose Cup Size & lt; / Option & gt; & Lt; Option value = "A" square = "A293" style = "display: none;" & Gt; A & lt; / Options & gt; & Lt; Option value = "b" square = "a293" style = "display: none;" & Gt; B & lt; / Options & gt; & Lt; Option value = "c" square = "a293" style = "display: none;" & Gt; C & lt; / Options & gt; & Lt; Option value = "d" class = "a310" style = "display: none;" & Gt; D & lt; / Options & gt; & Lt; Option value = "e" square = "a310" style = "display: none;" & Gt; E & lt; / Options & gt; & Lt; Option value = "f" square = "a310" style = "display: none;" & Gt; F. & lt; / Options & gt; & Lt; Option value = "g" square = "a 323" style = "display: none;" & Gt; G & lt; / Options & gt; & Lt; Option value = "h" square = "a 323" style = "display: none;" & Gt; H & lt; / Options & gt; & Lt; Option value = "i" square = "a323" style = "display: none;" & Gt; I & lt; / Options & gt; & Lt; / Select & gt; Here is jQuery below. Here's my argument in jQuery: When a person makes a selection from the first option, we store the selection class in a variable (ProductBandSize). Then in the second part we compare the options in 2 drop down against variable value. If the second dropdown option is the same class as the variable, add a class of "display_block" Unfortunately, all the options of the second drop down class are getting the class value of "display_block".  
  & lt; Script type = "text / javascript" & gt; Change (function () {// When the user changes the band size, then get the size of the cup and give it a variable var ProductBandSize = $ ("# product_band_size option: (" # product_cup_size option "), ifClass (ProductBandSize) // If the product cup size option is the value of the class similar to the first class, add class display_block to it. $ ("# Product_cup_size option") AddClass ("display_block");}});}); & lt; / script & Gt;    
 
 
 to match you  filter  Using          $ ("# Product_band_size"). Change (function () {// When the user changes to the bed size, get the size of the cup and specify it in the variable variable ProductBandSize = $ ("#product_band_size option: selected"). Compare Attr ("class"); // product size size options with variable "ProductBandSize" $ ("# product_cup_size option") Not. Filter ("." + ProductBandSize) AddClass ("Display area"); });