根据下拉框的选择显示表单的不同元素

Question

所以我有一个页面有一个下拉列表和表单。而我想要做的是取决于我想要隐藏并显示表单的不同部分的下拉列表中选择的选项。

<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