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，并且select元素应始终具有一个带有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>

Answer 2

获取所选选项的值＆＃34; id＆＃34;使用jQuery属性，您可以使用以下jQuery代码段

var id = $("#select1 > option:selected").attr('data-id');

查看实际操作：http://plnkr.co/edit/bWj0MzLey0n4dkI03bs1?p=preview

此处的查询只是使用＆＃34;：select＆＃34;来获取所选选项。选择器（https://api.jquery.com/category/selectors/）。

但是，如示例中所示，您应该为选项标记使用不同的属性名称，例如＆＃34; data-id＆＃34;，as＆＃34; id＆＃34;有它的目的。

如何根据所选选项的ID来显示/隐藏div？

2 个答案: