Question

Iam尝试使选择下拉列表响应输入框因此，当输入框中输入（可以是任何内容）时，选择将变为关闭，如果输入框中没有输入任何内容，则选择将打开。知道代码有什么问题。提前谢谢

＆＃13;

$('.input').change(function() {
        if ($(this).val() === '') {
          $('.msg').text('open');}
            else {
            $('.msg').text('closed');}
        
      })

＆＃13;

<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>

＆＃13;

Answer 1

我建议三点改变：

将事件绑定更改为$('.input').on("input",function() { - 它将确保下拉列表随每次按键而不是blur更改。因此，用户可以在输入时查看更改。
将$(".msg")更改为$(this).parents("tr").find('.msg')。前者选择DOM中具有.msg类的所有元素，而后者仅影响属于当前.msg的{{1}}元素。
将tr更改为.text('open') - 这会设置.val("open")元素的值。

＆＃13;

select

＆＃13;

$('.input').on("input",function() {
  if ($(this).val() === '') {
    $(this).parents("tr").find('.msg').val('open');
  } else {
    $(this).parents("tr").find('.msg').val('closed');
  }
})

＆＃13;

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>

{
    "_id" : ObjectId,
    "Timestamp" : ISODate,
    "TagID" : ObjectId,
    "Value" : string or double,
    "FileReferenceID" : ObjectId,
    "WasValueInterpolated" : int
}

如何使选择下拉列表响应输入框

3 个答案: