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

时间：2017-01-13 13:05:54

标签： javascript jquery html

//在连续选择每个下拉列表中的当前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元素，在选择第二个下拉列表时，函数调用本身没有发生。

2 个答案:

答案 0 :(得分：0)

您的代码中存在一些问题。

1：HTML有重复的id元素，这使得html无效。

2：您正在使用id选择器附加事件，如果要将事件与单个元素绑定，则应该这样做。

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

请尝试以下代码。

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

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你应该使用class来做这样的事情。

我删除了重复的ID并添加了class名称选项 

$(document).ready(function() {
  $(".options").bind('change', function() {
    if ($(this).val() == 'saab') {
      $(this).closest('tr').find('input').attr('disabled', 'disabled').val('');
    } else {
      $(this).closest('tr').find('input').removeAttr('disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0">
  <tr>
    <td class="select">Online Password (Repeated)&nbsp;</td>
    <td>
      <select name="D1" class="options">
        <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="">
      <!-- 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="options">
        <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="">
    </td>
  </tr>
  <tr>
    <td class="select">Online Password (Repeated)&nbsp;</td>
    <td>
      <select name="D1" class="options">
        <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="">
    </td>
  </tr>
  <tr>
  </tr>
</table>

  

更新： “我想要相同的ID，因为这些下拉列表将作为带有硬编码ID的字符串出现，对于所有下拉列表都是相同的”

如果您无法为这些元素添加class或修改ID，那么这将有效，但我确实建议您找到一种方法来编辑这些ID和使用class名称。这个方法可以正常运行，不需要对HTML元素进行编辑。

我已将选择器更改为"select[id=d1]" 

$(document).ready(function() {
  $("select[id=d1]").bind('change', function() {
    if ($(this).val() == 'saab') {
      $(this).closest('tr').find('input').attr('disabled', 'disabled').val('');
    } else {
      $(this).closest('tr').find('input').removeAttr('disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

如果您对上述源代码有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

相关问题
最新问题