如何使选择下拉列表响应输入框

Question

我试图使选择下拉列表响应输入框，所以当在输入框中输入某项（可以是任何东西）时，选择将更改为关闭，如果在输入框中未输入任何内容，则选择将为打开。 知道代码有什么问题。谢谢

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

Answer 1

我建议三个更改：

1. 将事件绑定更改为$('.input').on("input",function() { -这将确保下拉菜单在每次按键时都发生变化，而不是在blur发生变化。因此，用户可以通过以下方式看到更改：他们输入。

2. 将$(".msg")更改$(".msg") $(this).parents("tr").find('.msg') 。 前者选择DOM中所有具有.msg类的元素，而后者仅影响属于当前tr的.msg元素。

3. 将.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> 

Answer 2

正如我对这个问题的评论一样，请使用.val()函数并引入与值相同的名称以选择所需的值。

请记住，您提供的代码如果有许多.msg下拉列表，则会为所有这些下拉列表进行更改。

这是代码段代码。

 $('.input').change(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> 

Answer 3

使用val()来更改select的值，并在按下某键时使用keyup触发它，因为如果使用change ，则只有在焦点不在input才会触发它。

 $('.input').on('keyup',function() { if ($(this).val() === '' ) { $(this).parent().next().children('select').val('open'); }else { $(this).parent().next().children('select').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>