如何使用jQuery获取datalist选中项的data-info自定义属性值

问题原因 #

你之前的写法是读取input元素自身的自定义data属性，而data-info实际定义在datalist的子option元素上，所以返回空对象。

实现方案 #

你需要先拿到输入框当前选中的值，再匹配到datalist中对应的option元素，再读取它的data-info属性，参考代码如下：

$("#inputKundenliste").change(function() {
  // 获取输入框当前值
  const inputVal = $(this).val();
  // 匹配datalist中对应option
  const targetOption = $("#kundenliste option").filter(function() {
    // 若option显式设置了value属性，将$(this).text()替换为$(this).val()即可
    return $(this).text() === inputVal;
  });
  // 匹配到对应选项时读取属性
  if (targetOption.length) {
    const infoValue = targetOption.data("info");
    console.log(infoValue); // 选中ABC时输出MyInfo1，选中CDE时输出MyInfo2
  }
});

如果用户输入的内容不在datalist的可选范围内，targetOption长度为0，可以根据业务需求自行补充异常处理逻辑。

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