如何使選擇下拉列表響應輸入框

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>