1. 首页
  2. 问答
  3. 如何选择表中当前选定的下拉选项td元素

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

2017-01-13 57 views
-1

//关于选择每行下拉的当前td元素我想禁用相应的输入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函数调用本身是不会发生作用。

来源

2017-01-13 vijay ram

+1

'ID'应该是唯一的，也许使用这个类会更好？ – NewToJS

+0

在选择相应的tr td下拉列表时，我想要禁用相同的tr td输入元素，但是此代码仅适用于第一个tr td select下拉列表，即函数调用只发生一次，第一个 –

+0

我想用相同的id因为这些下拉菜单是以硬编码标识的字符串形式出现的，这对于所有下拉菜单都是相同的。 –

回答

0

您的代码中几乎没有问题。

1：HTML有重复的id元素，导致html无效。

2：您正在附加事件与id选择器，如果您想要绑定一个事件与单个元素应该完成。

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

尝试下面的代码。

我已经将您的html中的id属性更改为class，并更改逻辑以在select中找到input元素。

<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>

来源

2017-01-13 13:17:58 Deep

+0

感谢您的答案，但非常感谢纠正我 –

+0

@vijayram NP很高兴帮助:) – Deep

+0

@Deep打败我秒：p – NewToJS

0

您应该使用class这样的事情。

我已删除重复的ID的和补充的选项

$(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>

更新class名称：“我想与相同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>

如果您对源代码的任何问题，上面请在下面发表评论，我会尽快回复您。

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

来源

2017-01-13 13:18:27 NewToJS

+0

谢谢吨，这是什么发生俯瞰基础 –

+0

@vijayram没问题。如果您有任何问题随时问，我会很乐意以任何方式提供帮助。 – NewToJS

+0

@vijayram由于您的评论，我添加了第二种方法*“下拉菜单以硬编码的字符串形式出现”*。 – NewToJS

相关问题

 相关问题