如何获取选中datalist选项的data-value属性值

没问题，要实现这个需求，核心思路是监听输入框的变化事件，然后根据输入框的值匹配datalist中的对应选项，进而提取它的data-value属性。下面给你两种具体的实现方案，你可以根据场景选择：

方案一：基础匹配（无需修改现有HTML） #

如果不想改动你的现有HTML结构，可以直接通过选项的文本内容来匹配：

// 获取DOM元素
const input = document.getElementById('proname');
const datalist = document.getElementById('items');

// 监听输入框的实时输入/选择事件
input.addEventListener('input', function() {
  const inputText = this.value.trim();
  
  // 输入为空时直接返回
  if (!inputText) {
    console.log("未选择任何产品");
    return;
  }
  
  // 把datalist的选项转换成数组，方便查找
  const options = Array.from(datalist.options);
  // 找到文本内容和输入值完全匹配的选项
  const matchedOption = options.find(opt => opt.textContent.trim() === inputText);
  
  if (matchedOption) {
    // 获取data-value属性值
    const productValue = matchedOption.getAttribute('data-value');
    console.log("选中产品的data-value：", productValue);
    // 这里可以把productValue用于你的业务逻辑，比如赋值给隐藏输入框、发起请求等
  } else {
    console.log("未匹配到对应的产品选项");
  }
});

方案二：优化写法（推荐，需微调HTML） #

给<option>添加value属性（和文本内容一致），这样匹配起来更高效，代码也更简洁：

首先修改你的HTML：

<div class="col-md-3 "> 
  <input type="text" class="form-control" list="items" id="proname" placeholder="Product Name" style="margin-left: 12px;"> 
  <datalist id="items"> 
    <option value="Chicken Biryani() 57" data-value="120.0"> Chicken Biryani() 57 </option> 
    <option value="chiken manchuriya() 58" data-value="100.0"> chiken manchuriya() 58 </option> 
  </datalist> 
</div>

然后对应的JavaScript代码：

const input = document.getElementById('proname');
const datalist = document.getElementById('items');

input.addEventListener('input', function() {
  const inputValue = this.value.trim();
  if (!inputValue) return;
  
  // 通过CSS选择器直接匹配value属性对应的选项
  const matchedOption = datalist.querySelector(`option[value="${inputValue}"]`);
  
  if (matchedOption) {
    // 使用dataset获取data-value更简洁
    const productValue = matchedOption.dataset.value;
    console.log("选中产品的data-value：", productValue);
  } else {
    console.log("没有找到匹配的产品");
  }
});

关键说明 #

• 选择input事件还是change事件？
  • input事件会实时响应用户的每一次输入和选择操作，适合需要实时反馈的场景；
  • change事件只会在输入框失去焦点时触发，适合只需要在用户确认选择后获取值的场景。
• 为什么要加trim()？
  因为你的选项文本前后可能有空格，去掉前后空白可以避免因为空格导致的匹配失败。
• 如果用户输入部分内容怎么办？
  上面的方案只匹配完全一致的内容，如果你需要用户输入部分内容后选择选项时也能获取值，建议监听change事件，因为只有当用户从datalist中选择选项时，输入框的值才会完全等于选项的文本（或value）。

内容的提问来源于stack exchange，提问作者bharath