jQuery：如何根据第一个选择中的类选择另一个选择中的选项答案

【问题标题】：jQuery: how to choose options in another selection based off a class in the first selectionjQuery：如何根据第一个选择中的类选择另一个选择中的选项
【发布时间】：2011-11-09 10:08:45
【问题描述】：

我正在尝试根据在第一个下拉菜单上所做的选择在第二个选择下拉菜单中显示下拉选项。在这个例子中，第一个下拉菜单有 3 个选项，每个选项都有自己独特的类。第二个下拉菜单有几个下拉选项，其类值与第一个下拉菜单中的类值相匹配。默认情况下，第二个下拉选项是隐藏的，直到用户从第一个选项中选择一个下拉选项。我的目标是，一旦用户从第一个下拉选项中进行选择，然后将“display_block”类添加到第二个下拉菜单中的选项中，这些选项与第一个下拉菜单中的选择具有相同的类值盒子。

这里是 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>

【问题讨论】：

考虑到 display:none 在 ie for options 中不起作用

标签： jquery

【解决方案1】：

您应该使用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");

  });

【讨论】：

【解决方案2】：

短语$("#product_cup_size option").hasClass(ProductBandSize) 将始终为真，$("#product_cup_size option").addClass("display_block") 将在下拉列表中的所有选项上设置类。

试试

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

而不是 if 语句。

【讨论】：

【解决方案3】：

你为什么不能直接说：

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

真的，让 jQuery 为您完成这项工作。

【讨论】：

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

【解决方案4】：

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

【讨论】：