下拉選擇框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>
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
