如果选择等于所选选项显示不同的选择

时间:2013-11-16 12:02:01

标签: javascript php jquery

我该怎么做:如果主要选择值1显示第一个选择框,如果值2显示第二个选择框,如果值3显示第三个选择框

    <select id="main">
           <option value="1">Value1</option>
           <option value="2">Value2</option>
           <option value="3">Value3</option>               
    </select>
    <select id="first">
           <option value="option1">All</option>
           <option value="option2">Something</option>
    </select>

    <select id="second">
           <option value="A">One</option>
           <option value="B">Two</option>
    </select>
    <select id="third">
            <option value="White">White</option>
            <option value="Black">Black</option>
    </select>

2 个答案:

答案 0 :(得分:1)

将ID用作值

<select id="main">
       <option value="first">Value1</option>
       <option value="second">Value2</option>
       <option value="third">Value3</option>               
</select>

只是这样做:

$('#main').on('change', function() {
    $('#first, #second, #third').hide();
    $('#'+this.value).show();
});

FIDDLE

答案 1 :(得分:0)

$('#main').on('change',function(){
    $('#first,#second,#third').hide();
    var sel = $(this).val();
    if(sel==1){
        $('#first').show();
    }else if(sel==2){
        $('#second').show();
    }else{
        $('#third').show();
    }
});

确保首次加载时隐藏#first#second#third