如何使用jQuery获取HTML5 datalist的自定义data-value属性值

你原代码尝试直接从<input>元素读取data-value，但该自定义属性实际绑定在<datalist>的子<option>节点上，<input>本身没有该属性，因此无法获取到目标值。

核心逻辑 #

监听输入框的选中/输入事件，用输入框当前的value匹配datalist中对应的option，再读取该option的data-value属性。

完整jQuery代码 #

// 监听输入框change事件（选中选项、输入完成失焦时触发）
$('#ocorrenciaSetup').on('change', function() {
  const inputVal = $(this).val();
  // 匹配datalist中对应value的option
  const targetOption = $(`#ocorrenciasListSetup option[value="${inputVal}"]`);
  // 读取自定义属性data-value
  const dataValue = targetOption.data('value');
  // 此处可替换为你的业务逻辑，示例为控制台打印验证
  console.log('获取到的data-value值：', dataValue);

  // 拿到值后传递到后端插入SQL Server的请求示例（根据实际接口调整）
  /*
  $.post('/你的后端处理接口地址', {
    ocorrenciaData: dataValue
  }, function(res) {
    // 处理插入成功/失败的返回结果
  })
  */
});

• 若业务场景中存在多个option的value重复的情况，建议额外加校验逻辑保证匹配准确性
• 数据库插入操作必须在后端服务层实现，禁止直接在前端操作数据库，避免出现SQL注入等安全风险

内容的提问来源于stack exchange，提问作者Henrique Krupck Secchi