多个带隐藏值的datalist表单仅提交首个值的解决方法问询

问题原因 #

你当前代码的问题出在JS事件绑定逻辑：document.querySelector('input[list]')仅会匹配页面中第一个带有list属性的input元素，第二个datalist对应的输入框没有绑定input事件，用户输入/选择的内容不会同步到对应的隐藏字段，因此表单提交时无法拿到第二个datalist的对应值。

解决方案 #

将原JS代码中的单个元素选择改为选中所有带list属性的输入框，遍历后逐个绑定事件即可，修改后的完整JS代码如下：

document.querySelectorAll('input[list]').forEach(function(input) {
    input.addEventListener('input', function(e) {
        var input = e.target,
            list = input.getAttribute('list'),
            options = document.querySelectorAll('#' + list + ' option'),
            hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
            inputValue = input.value;

        hiddenInput.value = inputValue;

        for(var i = 0; i < options.length; i++) {
            var option = options[i];
            if(option.innerText === inputValue) {
                hiddenInput.value = option.getAttribute('data-value');
                break;
            }
        }
    });
});

修改后两个输入框的输入、选择操作都会被监听，选中选项后对应的隐藏字段会自动同步data-value的值，表单提交时两个datalist的取值都可以正常传到后端。

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