如何获取input关联datalist选中选项的abrv自定义属性？

AI 小北

2026-8-5

问题

现有如下HTML代码：

Area: <input onchange="loadInfo()" id="area_input" list="areas" placeholder="choose option: ">
<datalist id="areas" >
        <option abrv="TV"> TV </option>
        <option abrv="NOT"> NOTEBOOK </option>
        <option abrv="ARC"> AIR CONDITIONING </option>
        <option abrv="PIN"> PINS </option>
</datalist>

通过document.getElementById('area_input').value可获取选中项的文本，但目标是获取选项的abrv属性，该属性不会自动传递到input标签中。需要获取这个属性来拼接Django URL（格式为database/area/[abrv]），目前虽可通过截取文本变通，但未来需提取更复杂的编码，因此需要直接获取属性值。

曾尝试将abrv值放到option的value属性中，但此时用户会同时看到value值和文本内容，不符合仅显示完整文本的需求。

解决方案

在loadInfo()函数中，遍历datalist的所有option元素，找到与当前input值匹配的选项，再提取其abrv属性：

1. 实现代码

function loadInfo() {
  const input = document.getElementById('area_input');
  const datalist = document.getElementById('areas');
  // 遍历选项，匹配去除首尾空格后的文本
  const matchedOption = Array.from(datalist.options).find(option => 
    option.textContent.trim() === input.value.trim()
  );
  
  if (matchedOption) {
    const abrv = matchedOption.getAttribute('abrv');
    // 拼接Django URL
    const targetUrl = `database/area/${abrv}`;
    console.log(targetUrl); // 测试输出，可替换为实际跳转/请求逻辑
  }
}