使用Javascript隐藏和显示下拉菜单和文本字段

Using Javascript to hide and show drop down menu and text field

本文关键字：文本 字段 下拉菜单 显示 隐藏 使用 Javascript      更新时间：2023-09-26

在以下下拉菜单中，当用户选择操作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>

如果用户选择雇员no，我希望隐藏最后一个下拉菜单，并显示以下文本字段:

<input type='text'>

我所做的是放入以下脚本，但它没有隐藏这两个元素:

function check(elem) {
    document.getElementById('OperationType').disabled = !elem.selectedIndex;
}

它只是禁用了它。我希望它是隐形的。由于

为您的OperationNos select: 添加style="display: none"

检查()不需要通过this。

并修改你的函数来切换这个css属性，如果"OpNo"被选中:

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";
    }
}

示例:http://jsfiddle.net/2pna2/

使用:-

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代码:

<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>

看那个

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
相关文章：