Question

我有一个带有表单的页面，并且在两个单独的表上询问这些表单的问题。我想让第二张表仅在从第一张表中选择一个，两个或三个时才显示，并且默认情况下不可见。如果再次选择零，表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>

Answer 1

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

 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;
 });

Answer 2

使用数组包含，检查代码段。

<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>

隐藏的div出现在表格选项中

2 个答案: