Question

我在表中有两列，每列都有一个选择下拉列表。根据第一个下拉列表的值启用或禁用第二个下拉列表。

这适用于第一行，但是当我添加多行（实际上是在程序中动态完成）时，＆＃34; id＆＃34;是相同的，启用和禁用的验证无法工作 - 我怀疑是因为相同的名称。

我有什么想法可以最好地让它与多行一起使用？

我到目前为止的例子 - https://jsfiddle.net/dave_pace/L8naac5u/

<table id="example" >
  <tr>
    <th>Site</th>
    <th>Location</th>
  </tr>

  <tr>
    <td>
      <select name="site" id="site">
        <option value="Local" selected="">Local</option>
        <option value="Remote">Remote</option>
      </select>
    </td>
    <td>
      <select name="remotesite" id="remotesite" disabled>
        <option value="&quot;"></option>
        <option value="Acme Ltd 0001">Acme Ltd 0001</option>
        <option value="Acme Ltd 0002">Acme Ltd 0002</option>
        <option value="Acme Ltd 0003">Acme Ltd 0003</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select name="site" id="site">
        <option value="Local" selected="">Local</option>
        <option value="Remote">Remote</option>
      </select>
    </td>

    <td>
      <select name="remotesite" id="remotesite" disabled>
        <option value="&quot;"></option>
        <option value="Acme Ltd 0001">Acme Ltd 0001</option>
        <option value="Acme Ltd 0002">Acme Ltd 0002</option>
        <option value="Acme Ltd 0003">Acme Ltd 0003</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select name="site" id="site">
        <option value="Local" selected="">Local</option>
        <option value="Remote">Remote</option>
      </select>
    </td>

    <td>
      <select name="remotesite" id="remotesite" disabled>
        <option value="&quot;"></option>
        <option value="Acme Ltd 0001">Acme Ltd 0001</option>
        <option value="Acme Ltd 0002">Acme Ltd 0002</option>
        <option value="Acme Ltd 0003">Acme Ltd 0003</option>
      </select>
    </td>
  </tr>

</table>

$(document).ready(function(){
    function updateTable() {

      // alert('hi');

      // alert($(this).val());

      // alert($(this).text());

      if ($(this).val() == "Remote") {
        document.getElementById('remotesite').disabled=false;
      }
      else {
        document.getElementById('remotesite').disabled=true;
      }

    }

    $("#site").change(updateTable);

});

Answer 1

警告：您不应该使用相同的值声明多个id，因为您可以使用类。 id必须是唯一的，不像可以是具有相同值的多个类。

<强>解决方案：从选择标记中删除您的ID，并将此脚本标记替换为您的。

<script type="text/javascript"> $("select[name='site']").change(function(){ var _this = $(this); _this.parent().siblings().children("select[name='remotesite']").attr('disabled', false) }); </script>

使用Jquery

1 个答案: