jQuery：如何在第一个选择中基于类选择另一个选项

我试图在第二个选择下拉菜单中显示下拉选项，该选项基于第一个下拉菜单中的选择。在这个例子中，第一个下拉菜单有3个选择，每个选择都有自己独特的类。第二个下拉菜单中有几个下拉选项，其中的类值与第一个下拉菜单中的类值相匹配。默认情况下，第二个下拉选项是隐藏的，直到用户从第一个选择中选择一个下拉选项。我的目标是，一旦用户从第一个下拉选项中进行选择，然后向第二个下拉菜单中的选项添加一个“display_block”类，该类具有与第一个下拉列表中的选择相同的类值框。jQuery：如何在第一个选择中基于类选择另一个选项

下面是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>

这里是下面的jQuery的。这是我在jQuery中的逻辑：当有人从第一个选项中进行选择时，我们将选择类存储在一个变量（ProductBandSize）中。然后在第二部分中，我们将第二个下拉列表中的选项与变量值进行比较。如果第二个下拉选项与变量具有相同的类，请添加一个“display_block”类。不幸的是，第二个下拉类中的所有选项都获得了“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>

来源

2011-09-02 flinx777

考虑到显示：没有不适用于选项 – Einacio

哦......好点...谢谢！ – flinx777

您应该使用filter找到匹配的option，然后添加该类。 hasClass只会说真/假，如果类存在与否。试试这个

$("#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"); 

    });

来源

2011-09-02 19:03:04 ShankarSangoli

嘿ShankarSangoli ......这个伎俩！非常感谢！ – flinx777

短语$("#product_cup_size option").hasClass(ProductBandSize)将永远是真实和$("#product_cup_size option").addClass("display_block")将设置在下拉列表中的所有选项的类。

尝试

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

代替if语句。

来源

2011-09-02 19:02:49 JoshNaro

为什么你不能只是说：

$('#product_cup_size option').hide(); 
$('#product_cup_size option.' + ProductBandSize).show();

真的，让jQuery的做的工作适合你。

来源

2011-09-02 19:07:12

我刚在safari和chrome中试过这个。他们不明显支持它（不知道为什么），但FF确实:( – flinx777

这是fiddle使用.show（）和.hide（），而不是显式设置CSS显示属性（即使show（）和hide（）在后台执行此操作）。

来源

2011-09-02 19:15:33

jQuery：如何在第一个选择中基于类选择另一个选项

回答

相关问题