如何從選定的（不同的ID，相同的名稱）數據列表（html5）選項獲取data-id屬性的值？

Question

<input type="text" value="" list="department" />
<datalist id="department">
    <option data-id="1" value="arthur"></option>
    <option data-id="2" value="arthur"></option>
    <option data-id="3" value="king"></option>   
    <option data-id="4" value="gabriel"></option>
</datalist>

我只需要在單擊“ #button”或任何事件時從選定的數據列表選項中訪問“ data-id”的值。 有一種情況：相同的值名稱，但不同的data-id。 我想獲取正確的ID。 我該怎么辦？ 想你！

Answer 1

使用原始JavaScript可以很容易地通過兩種方式訪問​​這些值，並且不會與常規屬性沖突。 無論使用

• element.dataset[foo]
• element.getAttribute('data-' + foo) （這有更多的傳統支持）

其中foo是數據屬性的名稱，即您的情況下的"id"

---

<input>和<datalist>對不會強制從提供的<option>進行選擇，因此，如果要使用<select>代替，則不能直接查看所選的選項。

但是，您可以通過遍歷它們並檢查value來查找是否有與選擇匹配的<option> 。 請記住，在某些情況下，沒有任何匹配項。

下面是如何執行此操作的示例

 document.getElementById('check').addEventListener('click', function () { var output = document.getElementById('output'), input = document.getElementById('foo'), list = document.getElementById('bar'), i; for (i = 0; i < list.options.length; ++i) { if (list.options[i].value === input.value) { output.textContent = list.options[i].getAttribute('data-id'); return; } } output.textContent = 'No match found'; }); 

 <input id="foo" type="text" value="" list="bar" /> <datalist id="bar"> <option data-id="0" value="fizz"></option> <option data-id="1" value="buzz"></option>> </datalist> <button id="check">Check</button> <span id="output">Make choice, click check</span> 

Answer 2

由於您正在使用jquery，因此data（）應該可以完成此工作：

var id = $( '#department option:selected' ).data( 'id' );

現在， id應該包含所選選項的值。

更新資料

也，

1）如果要確保id變量是整數，則應使用：

parseInt( $( '#department option:selected' ).data( 'id' ) ).

2）將<datalist>元素更改為<select>元素。 數據列表在鍵入時用於自動完成，而select元素將允許您實際選擇一個選項。