隐藏的 div 出现在表格选项选择上答案

【问题标题】：Hidden div appear on table option select隐藏的 div 出现在表格选项选择上
【发布时间】：2018-10-01 06:10:13
【问题描述】：

我有一个包含表格的页面，这些表格的问题在两个单独的表格中提出。我想让第二个表仅在从第一个表中选择一个、两个或三个时才出现，并且默认情况下不可见。如果再次选择零，表 2 将再次消失。

我让它部分使用下面的代码，但是我认为我的脚本正在相互抵消。我可以让它与一个、两个或三个一起工作，但不是所有三个选项。在这种情况下，表 2 仅在我选择“三”时出现，而在选择零、一和二时没有任何反应。

我将如何更改脚本以使其在选择一、二或三时出现，并在再次选择零时消失。

<table>
  <tr>
    <td>Numbers</td>
    <td>
      <select id="numbers" name="numbers">
         <option value="Zero" selected>0</option>
         <option value="One">1</option>
         <option value="Two">2</option>
         <option value="Three">3</option>
       </select>
    </td>
  </tr>
</table>

<span id="animals" style="display: none;"> 
  <table>
       <tr>
           <td>Animal</td>
           <td>
              <select id="animal" input name="animal">
                  <option value="Dog">Dog</option>
                  <option value="Cat">Cat</option>
                  <option value="Rabbit">Rabbit</option>
              </select>
         </td>
      </tr>
  </table>
</span>

<script>
document.getElementById('numbers').addEventListener('change', function () {
    var style = this.value == 'One' ? 'inline' : 'none';
    document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
    var style = this.value == 'Two' ? 'inline' : 'none';
    document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
    var style = this.value == 'Three' ? 'inline' : 'none';
    document.getElementById('animals').style.display = style;
});
</script>

【问题讨论】：

标签： javascript html-table

【解决方案1】：

使用数组包含，检查代码sn-p。

<html>
<body>
<table>
  <tr>
    <td>Numbers</td>
    <td>
      <select id="numbers" name="numbers">
         <option value="Zero" selected>0</option>
         <option value="One">1</option>
         <option value="Two">2</option>
         <option value="Three">3</option>
       </select>
    </td>
  </tr>
</table>

<span id="animals" style="display: none;"> 
  <table>
       <tr>
           <td>Animal</td>
           <td>
              <select id="animal" input name="animal">
                  <option value="Dog">Dog</option>
                  <option value="Cat">Cat</option>
                  <option value="Rabbit">Rabbit</option>
              </select>
         </td>
      </tr>
  </table>
</span>
<script>

function checkVals(val){
  if(!val) {
    val = document.getElementById('numbers').value;
  }
 
var allowed = ["One", "Two", "Three"];
var check = allowed.includes(val);

if(check){
   document.getElementById('animals').style.display = 'block';
}else{
   document.getElementById('animals').style.display = 'none';
}

}

document.getElementById('numbers').addEventListener('change', function () {
var val = this.value;
checkVals(val);

});


window.onload="checkVals()";


</script>
</body>
</html>

【讨论】：

这行得通！谢谢。但是有一个小问题，当我提交此表单并转到下一页，但按返回返回此页面时，第二个表没有显示，尽管表一已经选择了一、二或三。有什么解决方法吗？
然后你必须将整个逻辑放入一个函数中，你必须检查 window.onload 像 window.onload="checkVals(0)"; 这样的函数，所以当页面加载/重新加载时，它将检查下拉值并显示/隐藏表.
不太清楚我是怎么做的，你能分享一个我可以使用的代码吗？

【解决方案2】：

您不需要编写三个事件侦听器。只有一个人可以做到这一点。

 document.getElementById('numbers').addEventListener('change', function () {
var style = (this.value == 'One' || this.value == 'Two' || this.value =='Three')  && (this.value != 'Zero') ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
 });

【讨论】：

three - 需要为Three，区分大小写。但是对于问这个@Dil Marc 的人，我建议将值命名为小写，必要时使用 _。
这行得通！谢谢。但是有一个小问题，当我提交此表格并转到下一页，但按返回返回此页面时，第二个表没有显示，尽管表一已经选择了一、二或三。有什么解决方法吗？