如何在表格 td 元素中选择当前选定的下拉选项
[英]how to select the current selected dropdown option in a table td element
问题描述
//on selecting the current td element in each dropdown down in a row i want to disable the corresponding input td element but this code is working only for the first dropdown 
//在一行中的每个下拉列表中选择当前 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) </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) </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) </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>
// the function which i wrote is working only for the first td element , on selecting the second dropdown td the function call itself is not happening. // 我编写的函数仅适用于第一个 td 元素，在选择第二个下拉列表 td 时，函数调用本身不会发生。
2 个解决方案
解决方案1
0 已采纳 2017-01-13 13:17:58
There are few issues in you code.您的代码中几乎没有问题。
1: HTML has duplicated id element which make html invalid. 1：HTML 有重复的 id 元素，这使 html 无效。
2: You are attaching event with id selector which should be done if you want to bind an event with single element. 2：您正在使用 id 选择器附加事件，如果您想将事件与单个元素绑定，则应该这样做。
3: The selector used for find the input in same row are wrong again. 3：用于查找同一行输入的选择器又错了。
Try the below code.试试下面的代码。
I have changed the id attribute in your html to class and changed the logic to find the input element next to the select.我已将 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) </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) </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) </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>
解决方案2
0 2017-01-13 13:18:27
You should use a class for something like this.你应该使用一个class来做这样的事情。
I have removed the duplicate ID 's and added a class name of options我删除了重复的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) </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) </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) </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>
UPDATE: "i want with same id as these dropdowns are coming as a string with hardcoded id which is same for all the dropdowns"
If you cannot add a class to those elements or edit the ID 's then this will work but I really do recommend you find a way to edit those ID 's and use a class name.如果您无法向这些元素添加class或编辑ID ，那么这将起作用，但我真的建议您找到一种方法来编辑这些ID并使用class名。 This method will function just fine with no editing required to the HTML elements.此方法将正常运行，无需对 HTML 元素进行编辑。
I have changed the selector to "select[id=d1]"我已将选择器更改为"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) </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) </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) </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>
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.如果您对上述源代码有任何疑问，请在下方留言，我会尽快回复您。
I hope this helps.我希望这有帮助。 Happy coding!快乐编码！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.