javascript - 如何根据所选选项的 id 显示/隐藏 div？

Question

我有这张 5 行的车辆发票表格。每行可以是不同的车辆，但如果选择了一辆车，它会显示第二个选择列表来选择其颜色。

这是我的 JavaScript:

<script>
    $(document).ready(function() {
        $("#select1").change(function(event) {
            var id = $(event.target).id();

            $("#" + id).show();
        });
    });
</script>

这是我的表格:

  <form name="invoice" action="invoice.php">
  <table border="1">
    <tr>
        <td>SN</td>
        <td>Vahicle Type</td>
        <td>Quantity</td>
    </tr>


      <?php $sn = 1 ;
       while ($sn < 5){ ?>

    <tr>
        <td>
            <?php echo $sn ?>
        </td>
        <td>
              <select name="vehicles[]" id="select1">
                  <option id="0" value="0">Select Vehicle</option>
                  <option id="<?php echo $sn ?>" value="toyota" name="toyota">Toyota</option>
                  <option id="<?php echo $sn ?>" value="nissan" name="nissan">Nissan</option>
                  <option id="<?php echo $sn ?>" value="BMW" name="bmw">BMW</option>
                  <option id="0" value="plane" name="plane">Plane</option>
                  <option id="0" value="boat" name="boat">Boat</option>
                  <option id="0" value="bike" name="bike">Bike</option>

              </select>    

          <div id="<?php echo $sn ?>" class="toggleable" style="display:none;">
              <select name="color[]" id="select2">
                  <option id="<?php echo $sn ?>" value="red" name="red">Red</option>
                  <option id="<?php echo $sn ?>" value="black" name="black">Black</option>
                  <option id="<?php echo $sn ?>" value="white" name="white">White</option>          
              </select>    
          </div>

        </td>

        <td>
            <input type="number" name="quantity[]">
        </td>
    </tr>

            <?php $sn=$sn+1; } ?>
</table>
</form>

我不太擅长 JavaScript。我通过学习在线示例编写了这段代码，但它不起作用。

Answer 1

正如 tomas_b 所说，您应该为此使用 data-* 属性。元素 ID 在文档中必须是唯一的，如果重复它们，则 getElementById 将仅返回第一个(大部分)。

如果监听器位于 select 元素上，那么它将是函数内的 this，可以直接访问其属性。也很少需要向已具有名称的表单控件添加 ID，并且选择元素应始终具有一个带有 selected 属性的选项，以便您知道默认情况下会选择一个选项。

所以你可能会这样做:

window.onload = function() {
  document.getElementById('select1').onchange = handleVehicleChange;
}

function handleVehicleChange() {
  var opt = this.options(this.selectedIndex);
  document.getElementById('carTypes').style.display = opt.getAttribute('data-type') == 'car'? '' : 'none';
}

     <select name="vehicles[]" id="select1">
        <option id="0" value="0" selected>Select Vehicle</option>
        <option data-type="car" value="toyota">Toyota</option>
        <option data-type="car" value="nissan">Nissan</option>
        <option data-type="car" value="BMW">BMW</option>
        <option data-type="aeroplane" value="plane">Plane</option>
        <option data-type="boat" value="boat">Boat</option>
        <option data-type="bike" value="bike">Bike</option>
    </select>    

    <div id="carTypes" class="toggleable" style="display:none;">
      <select name="color[]" id="select2">
        <option value="red">Red</option>
        <option value="black">Black</option>
        <option value="white">White</option>          
      </select>
    </div>