如何使選擇下拉菜單響應輸入框

Iam試圖讓選擇下拉菜單響應輸入框因此，當輸入框中輸入什麼東西（可以是任何東西）時，選擇將更改爲關閉，如果輸入框中沒有任何內容被輸入，則選擇將被打開。任何想法，當我就此問題發表意見有什麼不對的code.Thanks提前如何使選擇下拉菜單響應輸入框

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

來源

2017-10-17 epiphany

的.text（）將剛剛添加文本元素。由於元素不包含文本，因此它包含值，沒有任何反應。不知怎的，你必須選擇值。嘗試使用.val（「close」）或「open」。 https://stackoverflow.com/questions/292615/how-can-i-set-the-value-of-a-dropdownlist-using-jquery – Cheshire

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

來源

2017-10-17 07:43:16

Perfecto，謝謝你 – epiphany

@epiphany我很高興我能夠幫助。只要標記爲答案，如果它解決你的問題:) –

我會，必須等待2分鐘 – epiphany

，使用.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>

來源

2017-10-17 07:42:10 Cheshire

當我試圖在第一行輸入......時，所有兩行的select下拉列表更改爲關閉，只有第一行應該更改爲關閉，而第二行保持打開狀態 – epiphany

是的，這是因爲在每個'.input'你都說所有'.msg'元素都會改變它們的值。你必須分隔你想要的。在這種情況下，你有'tr'，你可以得到父母'$（this）.parents（「tr」）'並找到'.msg'，然後改變'$（this）.parents（「tr 「）.find（」。MSG「）。val（「closed」）' – Cheshire

我更新了答案，以獲得兄弟姐妹下拉 – Cheshire

我建議三個轉變：

更改事件結合$('.input').on("input",function() { - 這將確保每按鍵，而不是blur下拉變化。因此，用戶將能夠在輸入時看到更改。
更改$(".msg")至$(this).parents("tr").find('.msg')。前者選擇DOM中具有.msg類的所有元素，而後者僅影響屬於當前tr的.msg元素。
更改.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>

來源

2017-10-17 07:43:28 Nisarg

謝謝你非常 – epiphany

如何使選擇下拉菜單響應輸入框

回答

相關問題