How to make the select dropdown be responsive to the input box

Question

Iam trying to make the select dropdown be responsive to the input box So when there's sth being enter in the input box (can be anything), the select will change to closed, If nothing is being enter in the input box, the select will be open. Any idea what's wrong with the code.Thanks in advance

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

I would suggest three changes:

1. Change the event binding to $('.input').on("input",function() { - it will ensure that the dropdown changes with every keypress rather than on blur . So the user will be able to see the changes as they type in.

2. Change $(".msg") to $(this).parents("tr").find('.msg') . The former selects all elements in DOM that have .msg class, while the latter only affects the .msg elements belonging to the current tr .

3. Change .text('open') to .val("open") - this sets the value of the select element.

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

As I commented on the question, use .val() function and introduce the same name as the value to select the value you want.

Take in mind that the code you provided, if there are many .msg dropdowns, it will change it for all of them.

Here is the snippet code.

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

Use val() to change the value of the select and use keyup to trigger it if something is being pressed because if you use change it will only trigger if the focus is not already in the 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>