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>
您应该使用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");
});
嘿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语句。
为什么你不能只是说:
$('#product_cup_size option').hide();
$('#product_cup_size option.' + ProductBandSize).show();
真的,让jQuery的做的工作适合你。
我刚在safari和chrome中试过这个。他们不明显支持它(不知道为什么),但FF确实:( – flinx777
考虑到显示:没有不适用于选项 – Einacio
哦......好点...谢谢! – flinx777