使用Javascript隐藏并显示下拉菜单和文本字段 [英] 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

<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

推荐答案

在你的OperationNos select中添加一个style =display：none：

您不需要将这个传递给check（）。

You do not need to pass this to check().

如果选择OpNo，修改你的函数来切换这个css属性：

And modify your function to toggle this css property if "OpNo" is selected:

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/

这篇关于使用Javascript隐藏并显示下拉菜单和文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！