根据下拉列表选择更改文本字段的数量

Question

从下拉列表中选择 "id" 后，我试图显示两个测试字段。它设置为隐藏，我试图在选择 "id" 时使其可见。不幸的是它不起作用。请帮忙！

<form>
            <input class="hidden" type="text" id="textField2">
            <input type="text" id="textField">

             <select id="select" name="selectData">
                    <option value="firstName">Name</option>
                    <option value="id">Id</option>
            </select>
            <input id="filter" type="button" value="Filter">

            <script>
                    var temp = document.getElementById("textField2").value;
                    if(document.getElementById("select")[0].value === "id"){
                            temp.style.visibility = "visible";
                    }else {
                            temp.style.visibility = "hidden";
                    }
            </script>
</form>

可能某处有误，或者有任何其他（更好）的方法可以做到这一点？

Answer 1

您可以使用以下解决方案：

<form>
  <script>
    function toggle() {
      var temp = document.getElementById("textField2");
    
      //check for selected option.
      if(document.getElementById("select").value === "id"){
        temp.style.visibility = "visible";
      } else {
        temp.style.visibility = "hidden";
      }
    }
  </script>
  <input class="hidden" type="text" id="textField2" style="visibility:hidden;">
  <input type="text" id="textField">
  
  <select id="select" name="selectData" onchange="toggle()">
    <option value="firstName">Name</option>
    <option value="id">Id</option>
  </select>
  
  <input id="filter" type="button" value="Filter">         
</form>

根据下拉列表选择更改文本字段的数量

Changing number of text fields, depending on drop down list choice

html

javascript

visibility

textfield