根据下拉框选择显示形式的不同元素(Show different elements of a form

于是我有了一个下拉列表和表单的页面。 并根据下拉列表我要隐藏和显示形式的不同部分所选择的选项是我想要做的是。

<select id="myselect>
    <option id="option1">Option_1</option>
    <option id="option2">Option_2</option>
    <option id="option3">Option_3</option>
</select>

<form action="" method="post">
    <input id="input_1" name="input_1" type="text" />
    <input id="input_2" name="input_2" type="text" />
    <input id="input_3" name="input_3" type="text" />
</form>

所以，如果选择Option_1然后显示INPUT_1和INPUT_3，而隐藏INPUT_2

Answer 1:

平原JS

window.onload=function() {
  document.getElementById("myselect").onchange=function() {
    document.getElementById("input_2").style.display=(this.options[this.selectedIndex].value=="option1")?"none":"block";
  }
  document.getElementById("myselect").onchange(); //trigger
}

Answer 2:

我设法得到您的问题通过添加一个“值”属性，你的选项标签解决：

<select id="myselect">
    <option id="option1" value="option1">Option_1</option>
    <option id="option2" value="option2">Option_2</option>
    <option id="option3" value="option3">Option_3</option>
</select>

<form action="" method="post">
    <input id="input_1" name="input_1" type="text" placeholder="input_1"/>
    <input id="input_2" name="input_2" type="text" placeholder="input_2"/>
    <input id="input_3" name="input_3" type="text" placeholder="input_3"/>
</form>​

和使用jQuery .change（）事件：

$select = $('#myselect');
$('#input_2').hide();
$('#input_3').hide(); 


$select.change(function(){
    if($(this).val() == "option1"){
        if($('#input_1').is(":hidden")){
            $('#input_1').show();            
        }        
        $('#input_2').hide();
        $('#input_3').hide(); 
    }
    if($(this).val() == "option2"){
        if($('#input_2').is(":hidden")){
            $('#input_2').show();            
        }
        $('#input_1').hide();
        $('#input_3').hide(); 
    }
    if($(this).val() == "option3"){
        if($('#input_3').is(":hidden")){
            $('#input_3').show();            
        }
        $('#input_1').hide();
        $('#input_2').hide(); 
    }     
});​

的jsfiddle

文章来源: Show different elements of a form depending on dropdown box selection