添加一個新的選項中的jQuery

Question

選擇上的「其他」點擊選擇「其他」，輸入框應該會出現，其價值將被追加到作爲

添加新的選項後，「其他」仍應在下拉列表中。如何實現這一目標？

<select class="form-control" id="category" name="category"> 
    <option>Notification</option> 
    <option>Other</option> 
</select> 

輸入框：

<input type="text" value=""> 

在添加值 「警報」 作爲一個選項，這應該是結構，

<select class="form-control" id="category" name="category"> 
     <option>Notification</option> 
     <option>Alert</option> 
     <option>Other</option> 
</select> 

Answer 1

這是我對你的解決方案。首先根據您的輸入值更改選項的文本，然後在文本「其他」中添加新選項。

$(document).on('click', '#add', function(){ 
 
    if($('#new-option').val() != '') 
 
    { 
 
     var val = $('#new-option').val(); 
 
     $('#foo option:last').html(val); 
 
     var opt = '<option>Other</option>'; 
 
     $('#foo').append(opt); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 

 
<select id="foo"> 
 
    <option>Notification</option> 
 
    <option>Other</option> 
 
</select> 
 

 
<input type="text" id="new-option" required> 
 
<button type="button" id="add">Add Option</button>