下拉选择框onchange触发隐藏输入框-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉选择框onchange触发隐藏输入框</title>
<script type="text/javascript">
window.onload=function(){
var sel=document.getElementById("sel");
if (sel.value=="隐藏输入框1") {
var sum1=document.getElementById("input1");//隐藏输入框1
sum1.style.display="none";
var sum2=document.getElementById("input2");//显示输入框2
sum2.style.display="block";
var sum3=document.getElementById("input3");//显示输入框3
sum3.style.display="block";
}
}

function sel() {
    var sel=document.getElementById("sel");
    if (sel.value=="隐藏输入框1") {
        var sum1=document.getElementById("input1");//隐藏输入框1
            sum1.style.display="none";
        var sum2=document.getElementById("input2");//显示输入框2
            sum2.style.display="block";
        var sum3=document.getElementById("input3");//显示输入框3
            sum3.style.display="block";    
    }
    else if (sel.value=="隐藏输入框2") {
        var sum1=document.getElementById("input1");//显示输入框1
            sum1.style.display="block";
        var sum2=document.getElementById("input2");//隐藏输入框2
            sum2.style.display="none";
        var sum3=document.getElementById("input3");//显示输入框3
            sum3.style.display="block";    
    }
    else{
        var sum1=document.getElementById("input1");//显示输入框1
            sum1.style.display="block";
        var sum2=document.getElementById("input2");//显示输入框2
            sum2.style.display="block";
        var sum3=document.getElementById("input3");//隐藏输入框3
            sum3.style.display="none";    
    }

}

</script>
</head>
<body>
<div style="text-align:center">
<h3>请选择要隐藏哪个输入框：</h3>
<select id="sel" onchange="sel()">
<option>隐藏输入框1</option>
<option>隐藏输入框2</option>
<option>隐藏输入框3</option>
</select>
<div id="input1">
<h4>输入框1：</h4>
<input type="text" placeholder="我是输入框1" name="">
</div>
<div id="input2">
<h4>输入框2：</h4>
<input type="text" placeholder="我是输入框2" name="">
</div>
<div id="input3">
<h4>输入框3：</h4>
<input type="text" placeholder="我是输入框3" name="">
</div>
</div>
</body>
</html>