如何在表格 td 元素中选择当前选定的下拉选项
[英]how to select the current selected dropdown option in a table td element
问题描述
//在一行中的每个下拉列表中选择当前 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>
// 我编写的函数仅适用于第一个 td 元素，在选择第二个下拉列表 td 时，函数调用本身不会发生。
2 个解决方案
解决方案1
0 已采纳 2017-01-13 13:17:58
您的代码中几乎没有问题。
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) </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
你应该使用一个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) </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>
更新： “我想要相同的 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) </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>
如果您对上述源代码有任何疑问，请在下方留言，我会尽快回复您。
我希望这有帮助。 快乐编码！
如何在tablepress的下拉菜单下显示当前选定的值选项？
[英]How to have the current selected value option under dropdown in tablepress?
如何制作选择下拉列表以根据当前时间选择选项值
[英]How make a select dropdown to select an option value based on current time
JavaScript：根据选择的<option>，在包含<select>的表中设置<td>的背景颜色
[英]JavaScript: Set background colour of <td> in table containing <select> based upon which <option> is selected
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.