jQuery嵌套在DataList標籤中 - 無法獲取所選項目

我正在爲輸入標籤實現自動完成功能。jQuery嵌套在DataList標籤中 - 無法獲取所選項目

當我開始輸入時，我看到下拉列表，然後選擇其中一個項目。當我試圖到達選定的項目時，我只是從選項列表中選擇第一個選項，而不是我選擇的選項。

這是什麼樣子：

<input id="chosenTxt" list="someList"> 
    <datalist id="someList"> 
    <select id="selectList"> 
     <option value="First" label="one" /> 
     <option value="Second" label="two" /> 
     <option value="Third" label="three" /> 
    </select> 
    </datalist> 
</input>

再比如說我選擇「第二」，並使用

$("#selectList option:selected").attr("label")

我得到「一個」。

供參考：我知道這是建立在jQuery UI，但我不想使用它。

來源

2017-03-02 Yoni Ziv

如果你不使用jQueryUI的的自動完成自動完成至極你用？ –

我已經實施了一個 –

很重要，因爲那麼我們知道如何回答你的問題，或者你可以做一個小提琴？ –

你需要監聽輸入元素上input事件和遍歷的選項，檢查是否輸入value等於一個選項的value。

您可以從數據列表上的options屬性中訪問數據列表元素的選項。

這裏是一個例子。

$('#chosenTxt').on('input', function() { 
 
    $that = $(this); 
 
    $.each($('#someList')[0].options, function(idx, opt) { 
 
    if($that.val() == opt.value) { 
 
     console.log(opt.label) 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="chosenTxt" list="someList"> 
 
<datalist id="someList"> 
 
<select id="selectList"> 
 
    <option value="First" label="one" /> 
 
    <option value="Second" label="two" /> 
 
    <option value="Third" label="three" /> 
 
</select> 
 
</datalist>

來源

2017-03-02 15:23:24 DavidDomain

這不起作用。如果我有兩個相同的值，但標籤不同，我會每次都拿到第一個 –

jQuery嵌套在DataList標籤中 - 無法獲取所選項目

回答

相關問題