[英]Using Javascript to hide and show drop down menu and text field
In the following drop-down menu, when a user selects operation No, I want the next drop-down menu displayed 在下面的下拉菜单中,当用户选择操作No时,我希望显示下一个下拉菜单
<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
谢谢
Add a style="display: none" to your OperationNos select: 在您的OperationNos选择中添加style =“display:none”:
You do not need to pass this
to check(). 你并不需要通过
this
检查()。
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/ 示例: http : //jsfiddle.net/2pna2/
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>
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.