javascript - 如何使选择下拉菜单响应输入框

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. 将事件绑定(bind)更改为 $('.input').on("input",function() { - 它将确保下拉列表随着每次按键而不是按一次而改变模糊。这样用户在输入时就能够看到更改。

2. 将 $(".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>