如何使用jQuery获取HTML datalist中与显示值不同的data属性

针对你给出的HTML结构，要获取datalist里选中项的data-value属性值（与显示文本不同），可以通过监听输入框事件、匹配对应option的方式实现：

你的HTML结构 #

<input list="items" id="item"> 
<datalist id="items">
   <option data-value="123">Uno</option>
   <option data-value="456">Dos</option>
</datalist>

jQuery实现代码 #

// 监听输入框的内容变化（覆盖选择选项和手动输入场景）
$('#item').on('input change', function() {
    // 提取输入框内容并去除首尾空格
    const inputText = $(this).val().trim();
    // 筛选出datalist中与输入文本匹配的option
    const targetOption = $('#items option').filter(function() {
        return $(this).text().trim() === inputText;
    });
    // 若找到匹配项，获取并处理data-value
    if (targetOption.length) {
        const dataValue = targetOption.data('value');
        // 这里可根据需求使用dataValue，比如打印或赋值
        console.log('对应data-value:', dataValue);
        // 也可以用attr方法直接获取属性值：targetOption.attr('data-value')
    } else {
        // 未匹配到选项时的处理逻辑
        console.log('无匹配选项');
    }
});

关键说明 #

• 同时监听input和change事件，确保无论是选择datalist选项还是手动输入文本，都能触发逻辑
• 用filter方法匹配option的文本内容时，记得去除首尾空格，避免因HTML中的空格导致匹配失败
• 获取data-value有两种方式：data('value')会读取jQuery缓存的data属性，attr('data-value')直接读取HTML标签上的属性值，可根据需求选择

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