如何在表格 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.