从下拉菜单中获取价值并显示所需的html不起作用

Question

    Look Up Temperature By: 
    <select id="dropdown">
      <option value="city" selected="selected">City</option>
      <option value="coordinates">Coordinates</option>
      <option value="zip">Zip</option>
    </select>

    <script type="text/javascript">
        var menu = document.getElementById("dropdown");
        var selected = menu.options[menu.selectedIndex].text;
    </script>   

    <script>
        if(selected == "Zip"){
            document.getElementById("zip").style.visibility = visible;
            document.getElementById("city").style.visibility = hidden;
            document.getElementById("coordinates").style.visibility = hidden;
        }
        if(selected == "City"){
            document.getElementById("zip").style.visibility = hidden;
            document.getElementById("city").style.visibility = visible;
            document.getElementById("coordinates").style.visibility = hidden;
        }
        if(selected == "Coordinates"){
            document.getElementById("zip").style.visibility = hidden;
            document.getElementById("city").style.visibility = hidden;
            document.getElementById("coordinates").style.visibility = visible;
        }
    </script>

    <form method="POST" action="/temperature" style="visibility:hidden;" id="zip" position="absolute">
                Enter Your Zip Code: <input type="text" name="zip">
                <input type="submit">
    </form>
    <form method="POST" action="/temperature" style="visibility:hidden;"  id="city" position="absolute">
                Enter Your City: <input type="text" name="city">
                <input type="submit">
    </form>
    <form method="POST" action="/temperature" style="visibility:hidden;"  id="coordinates" position="absolute">
                Enter Your Coordinates Values: <input type="texdt" name="coordinates" id="coordinates">
                <input type="submit">
    </form>

所以我要做的就是从下拉菜单中获取价值，并根据值显示所需的html表单。

1. 似乎整个javascript chucks都无法正常工作。我打印出“已选择”变量，但它没有返回任何值
2. 有没有有效的方法来“设置这个可见但隐藏其他一切”？

Answer 1

问题来自visible/hidden作为变量而不是字符串传递：

if(selected == "Zip"){
  document.getElementById("zip").style.visibility = "visible";
  document.getElementById("city").style.visibility = "hidden";
  document.getElementById("coordinates").style.visibility = "hidden";
}

而不是：

if(selected == "Zip"){
    document.getElementById("zip").style.visibility = visible;
    document.getElementById("city").style.visibility = hidden;
    document.getElementById("coordinates").style.visibility = hidden;
}

您可以在控制台中看到错误消息：

  

未捕获的ReferenceError：未定义隐藏

此外，您还要将代码包装在更改事件中，每次用户更改选项列表中的选项时都会调用该事件：

menu.addEventListener("change", function() {
   //You conditions here
}

希望这有帮助。

＆＃13;

＆＃13;

var menu = document.getElementById("dropdown");

menu.addEventListener("change", function() {
  var selected = menu.options[menu.selectedIndex].text;
  
  if(selected == "Zip"){
    document.getElementById("zip").style.visibility = "visible";
    document.getElementById("city").style.visibility = "hidden";
    document.getElementById("coordinates").style.visibility = "hidden";
  }
  if(selected == "City"){
    document.getElementById("zip").style.visibility = "hidden";
    document.getElementById("city").style.visibility = "visible";
    document.getElementById("coordinates").style.visibility = "hidden";
  }
  if(selected == "Coordinates"){
    document.getElementById("zip").style.visibility = "hidden";
    document.getElementById("city").style.visibility = "hidden";
    document.getElementById("coordinates").style.visibility = "visible";
  }
})

＆＃13;

Look Up Temperature By: 
<select id="dropdown">
  <option value="city" selected="selected">City</option>
  <option value="coordinates">Coordinates</option>
  <option value="zip">Zip</option>
</select>

<form method="POST" action="/temperature" style="visibility:hidden;" id="zip" position="absolute">
  Enter Your Zip Code: <input type="text" name="zip">
  <input type="submit">
</form>
<form method="POST" action="/temperature" style="visibility:hidden;"  id="city" position="absolute">
  Enter Your City: <input type="text" name="city">
  <input type="submit">
</form>
<form method="POST" action="/temperature" style="visibility:hidden;"  id="coordinates" position="absolute">
  Enter Your Coordinates Values: <input type="texdt" name="coordinates" id="coordinates">
  <input type="submit">
</form>

＆＃13;

＆＃13;

＆＃13;