如何在下拉列表中選擇選項添加文本框

-2

我試圖在下拉菜單中添加文本，但文本框不低於下拉可見的是期望輸出的畫面如何在下拉列表中選擇選項添加文本框

$.each(SegGoalData, function(i, v) { 
 
    $("#Select").append("<option value=" + SegGoalData[i][0] + ">" + SegGoalData[i][1] + "</option>"); // i am adding value to dropdown 
 
    $("#Select").append("<option><input type='text' name='fname'></option>"); // i am trying to append to textbox 
 
})

<select id="Select"> 
 

 
    <option selected="selected" disabled="disabled">Look here for more goals</option> 
 

 
</select>

來源

2017-01-23 user6885473

是你的目的只是在下拉選項中搜索？ – Curiousdev

如果用戶選項在下拉列表中不可用，則他可以在下拉框內的文本框中提及他想要的選項 – user6885473

不，您不能這樣做。請查看此[鏈接]（http://stackoverflow.com/questions/17227982/html-add-input-field-inside-a-dropdown-box）瞭解更多詳情。 – DaYdReAmeR

您可以使用select2 JS

Select2是一個全功能的，豐富的選擇替換/增強插件。它不僅重新設置了選擇的元素，而且還擴展了其他功能。

$(document).ready(function() { 
 
    $(".custom-select2").select2(); 
 
});

.custom-select2{width:200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> 
 

 
<select class="custom-select2"> 
 
    <option value="AL">Alabama</option> 
 
    <option value="AR">Arkansas</option> 
 
    <option value="IL">Illinois</option> 
 
    <option value="IA">Iowa</option> 
 
    <option value="KS">Kansas</option> 
 
    <option value="KY">Kentucky</option> 
 
    <option value="LA">Louisiana</option> 
 
    <option value="MN">Minnesota</option> 
 
    <option value="MS">Mississippi</option> 
 
    <option value="MO">Missouri</option> 
 
    <option value="OK">Oklahoma</option> 
 
    <option value="SD">South Dakota</option> 
 
    <option value="TX">Texas</option> 
 
    <option value="TN">Tennessee</option> 
 
    <option value="WI">Wisconsin</option> 
 
</select>

就像其它先進選擇的插件，它包在可定製的特徵，例如一整堆：