javascript - 使用 data-value 获取 datalist 对象所选选项的 id

Question

我想获取数据列表对象上所选选项的 ID(数据值)。

我尝试使用 Javascript 函数获取 ID，并使用 this.dataset.value但我得到的结果未定义

function getIdOfDatalist(divid){
    console.log(document.getElementById(divid).dataset.value);
}

<datalist id="options">
    <option value="myoption one" data-value="1">
    <option value="myoption two" data-value="2">
    <option value="myoption three" data-value="3">
</datalist>
    
<input list="options" id="myoptions">
<button onclick="getIdOfDatalist('myoptions');">check</button>

我的错误是什么？ (代码简单精简，JS在头部<script>)

Answer 1

如果稍微更改 HTML，您可以使用一种方法来避免自己循环项目。例如:

function getIdOfDatalist(listid){
  var listObj = document.getElementById(listid);
  var datalist = document.getElementById(listObj.getAttribute("list"));
  console.log(datalist.options.namedItem(listObj.value));
}

<datalist id="options">
  <option value="myoption one" name="myoption one" data-value="1">
  <option value="myoption two" name="myoption two" data-value="2">
  <option value="myoption three" name="myoption three" data-value="3">
</datalist>

<input list="options" id="myoptions">
<button onclick="getIdOfDatalist('myoptions');">check</button>

请注意，我向数据列表中的每个项目添加了“name”属性。