如何使用纯JavaScript获取选择完成后输入列表的data-value内容

安全阿岳

2026-7-25

解决Datalist选择后获取data-value值且保留输入框文本的问题

要实现选择选项后获取data-value对应的内部ID，同时让输入框保持显示选项文本，你可以通过匹配输入框文本与datalist中对应选项的方式实现，具体纯JavaScript方案如下：

修改后的完整代码

<html>
<head>
<script>
function onchangeTest(){
  const input = document.getElementById("input");
  const datalist = document.getElementById("datalist");
  // 从datalist中匹配与输入框文本一致的选项
  const matchedOption = Array.from(datalist.options).find(opt => opt.textContent === input.value);
  
  if(matchedOption){
    // 获取data-value对应的内部ID
    const internalId = matchedOption.dataset.value;
    alert(`选中的内部ID：${internalId}\n显示文本：${input.value}`);
    // 可将internalId存入隐藏输入框或全局变量，供后续业务逻辑使用
  } else {
    // 处理用户未选择列表中选项的情况
    alert("请选择下拉列表中的有效选项");
  }
}
</script>
</head>
<body>
    <div id="share">
        <input type="text" id="input" list="datalist" onchange="onchangeTest()">

        <datalist id="datalist">
           <option data-value="1">Foo</option>
           <option data-value="2">Bar</option>
           <option data-value="3">Baz</option>
           <option data-value="4">Foo Bar</option>
           <option data-value="5">Bar Baz</option>
        </datalist>
    </div>
</body>
</html>

核心逻辑说明

匹配目标选项：将datalist的options集合转为数组，利用find方法根据输入框的文本内容，定位对应的<option>元素。
读取内部ID：通过HTML5的datasetAPI直接获取选项的data-value属性值（dataset会自动解析data-*系列属性）。
保留显示文本：输入框的value始终为选项的文本内容，不会被内部ID覆盖，完全满足显示需求。