0

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>
xjshiya
  • 915
  • 7
  • 16
  • 44
epiphany
  • 756
  • 1
  • 11
  • 29
  • .text() will just add text to the element. As the element does not contain text, it contains values, nothing happens. Somehow you have to select the value. Try using .val("close") or "open". https://stackoverflow.com/questions/292615/how-can-i-set-the-value-of-a-dropdownlist-using-jquery – Zander Oct 17 '17 at 07:38

3 Answers3

2

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>
Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55
1

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>
Zander
  • 1,076
  • 1
  • 9
  • 23
  • when i tried to input sth on the 1st line, all two row's select dropdown change to closed, only the 1st row should be change to closed while the 2nd row remain open – epiphany Oct 17 '17 at 07:45
  • Yes, that's because on each `.input` you are saying that all the `.msg` elements will change their values. You have to to delimite the one you want. in this case, you have `tr`, you can get the parents `$(this).parents("tr")` and find the `.msg` and then change the value `$(this).parents("tr").find(".msg").val("closed")` – Zander Oct 17 '17 at 07:47
1

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>
Shadow Fiend
  • 1,829
  • 1
  • 9
  • 14