通过切换其他选择标签来隐藏和显示选择标签

Tuan Dang

我想基于我的第一个选择的选项显示一个选择选项标签。这是我的工作演示

<select id="main">
<option>all</option>
<option clas="first_opt">first</option>
<option class="second_opt">second</option>
<option class="third_opt">third</option>
</select>

<select id="sub_first" class="sub">
<option>sub 1</option>
<option>sub 1</option>
</select>

$(".sub").hide();
$("#main").change(function() {
var val = $(this).val();
$(".sub").hide();
if( val ) {
    $("#sub_" + val).show();   
}
})

但是我不认为这是一种完美的编码，因为例如，如果主选择选项的值包含两个或多个字母（例如“ first opt”），那么我的代码将无法正常工作。因此，我认为如果可以获取main选项的类值会更好。但是我无法使它起作用。请帮忙

手动的

由于您尚未在中添加value属性，因此您的代码现在可以正常工作option。所以$(this).val()退还你的option text value

在标记值属性中进行了一些更改option：DEMO

<select id="main">
    <option>all</option>
    <option class="first" value="first">first opt</option><!--value added-->
    <option class="second" value="second">second opt</option><!--value added-->
    <option class="third" value="third">third opt</option><!--value added-->
</select>

<select id="sub_first" class="sub">
    <option>sub 1</option>
    <option>sub 1</option>
</select>

<select id="sub_second" class="sub">
    <option>sub 2</option>
    <option>sub 2</option>
</select>

<select id="sub_third" class="sub">
    <option>sub 3</option>
    <option>sub 3</option>
</select>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。