選択ボックスを入力ボックスに応答させる方法

Question

入力ボックスに選択ドロップダウンを応答させようとしています 入力ボックスにsthが入力されている場合（何でも構いません）、選択はクローズ、入力ボックスに何も入力されていない場合、選択が開きます。私は.val()機能を使用して、必要な値を選択するための値と同じ名前を紹介し、質問にコメントしたよう事前

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

利用val()selectの値を変更し、あなたがchangeを使用する場合の焦点はになっていない場合にのみトリガーされますので、何かが押されている場合、それをトリガーするkeyupを使用します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>

Answer 2

にcode.Thanksと間違って何任意のアイデア。

.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

私は3つの変更を示唆している：

1. 変更$('.input').on("input",function() {に結合するイベントを - それは、すべてのキー入力ではなくblur上のドロップダウンの変更を保証します。ユーザーは入力時に変更内容を確認できます。

2. $(".msg")から$(this).parents("tr").find('.msg')に変更します。前者は.msgクラスを持つDOMのすべての要素を選択しますが、後者は現在の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>