我试图使选择下拉列表响应输入框 因此,当输入框中输入内容(可以是任何内容)时,选择将更改为关闭,如果输入框中没有输入任何内容,选择将打开。知道代码有什么问题吗?提前致谢
$('.input').change(function() {
if ($(this).val() === '') {
$('.msg').text('open');}
else {
$('.msg').text('closed');}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
</table>
最佳答案
我建议三项改变:
将事件绑定(bind)更改为
$('.input').on("input",function() {
- 它将确保下拉列表随着每次按键而不是按一次而改变模糊
。这样用户在输入时就能够看到更改。将
$(".msg")
更改为$(this).parents("tr").find('.msg')
。前者选择 DOM 中所有具有.msg
类的元素,而后者仅影响属于当前tr
的.msg
元素。将
.text('open')
更改为.val("open")
- 这会设置select
的值> 元素。
$('.input').on("input",function() {
if ($(this).val() === '') {
$(this).parents("tr").find('.msg').val('open');
} else {
$(this).parents("tr").find('.msg').val('closed');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px">
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td>
</tr>
<tr>
<td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px">
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td>
</tr>
</table>
关于javascript - 如何使选择下拉菜单响应输入框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46784836/