如何在表td元素中选择当前选定的下拉选项

debugcn 发表于 Dev

维杰·拉姆

//在连续的每个下拉列表中选择当前的td元素时，我想禁用相应的输入td元素，但是此代码仅适用于第一个下拉列表

     <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        </head>
        <script>
        $( document ).ready(function() {
        $("#d1").bind('change',function(){

        if($(this).closest('tr').find('#d1').val() == 'saab'){

        $("#d2").attr('disabled', 'disabled').val('');
            } 
        else{
        $("#d2").removeAttr('disabled');
        }  
        });
        });
        </script>
        </head>
        <body>
        <h1>Cab</h1>
        <table border="0">
            <tr>
                <td class="select">Online Password (Repeated)&nbsp; </td>
                <td><select name="D1" id="d1">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                </select></td>
              <td >
            <input type="text" value="" id="d2">
<!-- above is the input textbox i want to disable-->
          </td>
            </tr><tr>
                <td class="select">Online Password (Repeated)&nbsp; </td>
                <td><select name="D1" id="d1">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                </select></td>
              <td >
            <input type="text" value="" id="d2">
          </td>
            </tr>
            <tr>
                <td class="select">Online Password (Repeated)&nbsp; </td>
                <td><select name="D1" id="d1">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                </select></td>
              <td>
            <input type="text" value="" id="d2">
          </td>
            </tr>
           <tr>

          </tr>
        </table>


        </body>
        </html>

//我编写的函数仅适用于第一个td元素，选择第二个下拉菜单td时，函数调用本身并未发生。

深的

您的代码中很少有问题。

1：HTML具有重复的id元素，从而使html无效。

2：您将事件附加到id选择器，如果要将事件与单个元素绑定，则应执行此操作。

3：用于在同一行中查找输入的选择器再次错误。

试试下面的代码。

我已将您html中的id属性更改为class，并更改了逻辑以在select旁边查找输入元素。

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<script>
  $(document).ready(function() {
    $(".d1").on('change', function() {
      var context = ($(this).parents("tr"));
      if ($(this).val() == 'saab') {
        $(".d2",context).attr('disabled', 'disabled').val('');
      } else {
         $(".d2",context).removeAttr('disabled');
      }
    });
  });
</script>
</head>

<body>
  <h1>Cab</h1>
  <table border="0">
    <tr>
      <td class="select">Online Password (Repeated)&nbsp;</td>
      <td>
        <select name="D1" class="d1">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </td>
      <td>
        <input type="text" value="" class="d2">
        <!-- above is the input textbox i want to disable-->
      </td>
    </tr>
    <tr>
      <td class="select">Online Password (Repeated)&nbsp;</td>
      <td>
        <select name="D1" class="d1">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </td>
      <td>
        <input type="text" value="" class="d2">
      </td>
    </tr>
    <tr>
      <td class="select">Online Password (Repeated)&nbsp;</td>
      <td>
        <select name="D1" class="d1">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </td>
      <td>
        <input type="text" value="" class="d2">
      </td>
    </tr>
    <tr>

    </tr>
  </table>


</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。