Html 使用 Javascript 隐藏和显示下拉菜单和文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15860350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Javascript to hide and show drop down menu and text field
提问by Nasser
In the following drop-down menu, when a user selects operation No, I want the next drop-down menu displayed
在下面的下拉菜单中，当用户选择操作否时，我希望显示下一个下拉菜单
<select id="OperationType" onChange="check(this);">
<option value="OpNo">Operation No</option>
<option value="OpEmp">Employee No</option>
</select>
<select id=OperationNos>
<option value="1001">1001</option>
<option value="1002">1002</option>
</select>
If the user selects employee no, I want the last drop-down menu to be hidden and the following text field shown up:
如果用户选择员工编号，我希望隐藏最后一个下拉菜单并显示以下文本字段：
<input type='text'>
What I did is I put the following script but it doesn't hide neither of the two elements:
我所做的是我放置了以下脚本，但它没有隐藏这两个元素中的任何一个：
function check(elem) {
document.getElementById('OperationType').disabled = !elem.selectedIndex;
}
It only disabled it. I want it to be invisible. Thanks
它只是禁用了它。我希望它是隐形的。谢谢
回答by sman591
Add a style="display: none" to your OperationNos select:
将 style="display: none" 添加到您的 OperationNos 选择中：
You do not need to pass thisto check().
您不需要传递this给 check()。
And modify your function to toggle this css property if "OpNo" is selected:
如果选择了“OpNo”，请修改您的函数以切换此 css 属性：
function check() {
var dropdown = document.getElementById("OperationType");
var current_value = dropdown.options[dropdown.selectedIndex].value;
if (current_value == "OpNo") {
document.getElementById("OperationNos").style.display = "block";
}
else {
document.getElementById("OperationNos").style.display = "none";
}
}
Example: http://jsfiddle.net/2pna2/
回答by Vivek Sadh
Use this:-
用这个：-
function hideshow()
{
var s1= document.getElementById('OperationType');
var s2= document.getElementById('OperationNos');
if( s1.options[s1.selectedIndex].text=="Operation No")
{
s2.style.visibility = 'visible';
document.getElementById('t1').style.visibility = 'hidden';
}
if( s1.options[s1.selectedIndex].text=="Employee No")
{
s2.style.visibility = 'hidden';
document.getElementById('t1').style.visibility = 'visible';
}
}
function hide()
{
document.getElementById('t1').style.visibility = 'hidden';
}
Html code:-
HTML代码：-
<body onload="hide()">
<select id="OperationType" onChange="hideshow()">
<option value="OpNo">Operation No</option>
<option value="OpEmp">Employee No</option>
</select>
<select id="OperationNos">
<option value="1001">1001</option>
<option value="1002">1002</option>
</select>
<input type="text" id="t1" />
</body>
回答by kidwon
Look at that:
看那个：
var ot = document.getElementById('OperationType');
ot.disabled = !elem.selectedIndex;
ot.style.display = 'none'; // not rendered
//ot.style.visisbility = 'hidden'; // rendered but just invisble it's there
