Question

我想根据我的第一个选择选项显示一个选择选项标签。这是我的工作demo

<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();   
}
})

但我不认为这是一个完美的编码，因为例如，如果主选择选项的值包含两个或多个字母，例如＆＃34;首先选择＆＃34;然后我的代码不再工作了。所以我认为如果我能获得主选项的类值会更好。但我无法使其发挥作用。请帮忙

`

Answer 1

您可以在代码中使用className。

$("#main").change(function() {
    var val = this.className;
    $(".sub").hide();

    if( val ) {
        $("#sub_" + val).show();   
    }
})

Answer 2

您的代码现在正常运行，因为您尚未在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>

Answer 3

希望这会对你有所帮助

$(".sub").hide();

$("#main").change(function() {

    var val = $(this).val().substring(0, $(this).val().indexOf(' '));

    $(".sub").hide();

    if( val ) {
        $("#sub_" + val).show();   
    }
})

查看此http://jsfiddle.net/zfhLnpkp/

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

3 个答案: