javascript - 使用 Javascript 隐藏文本字段

Question

如果用户在一个字段中选择了某个option value字段select，那么您如何制作一个文本字段hidden，而不需要它。这必须在提交表单之前完成吗？

例如，在以下选择字段中，用户选择选择value='a'该文本字段将如何隐藏：

     <select name="form" id="aForm">
        <option value="a">choice1</option>
        <option value="b">choice2</option>
        <option value="c">choice3</option>
     </select>

     <input type="text" style="width:285px" name="textField" id="textField"/>

Answer 1

$("#aForm").on("change", function() { 
    if ($(this).val() == "a") 
        $("#textField").hide();
    else 
        $("#textField").show(); 
});

这里也是一个jsfiddle

我假设您将显示除 a 之外的任何其他值的文本字段。

如果您使用的是纯 JavaScript 而不是 jQuery

function hideTF() {
    var s = document.getElementById("aForm");
    document.getElementById("textField").style.display 
         = (s.selectedIndex > 0  && s.options[s.selectedIndex] == 'a'
         ? "none" : "block");
}
var s = document.getElementById("aForm");
if (s.attachEvent)
    s.attachEvent("onchange", hideTF);
else
    s.addEventListener("change", hideTF, false);

Answer 2

您可以使用它的变体：

var selection = aForm.selectedIndex,
    field = document.getElementById('textField');

if ( selection === x ) {

    field.style.display = "block"; // or visibility = "hidden"

}

这应该包含在一个.onchange事件中。是被选中的对应元素aForm.selectedIndex的索引。<option>