HTML 选项旁边的数据列表值

Question

我在下面的代码片段中有两个数据列表，所选选项的值应显示在它们旁边。

我的第一个（帐户）一个工作正常，但第二个（头）一个不工作。 没有为 Head 选择该值。

 /*List function starts*/ document.querySelector('input[list]').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; } } }); /*List function ends*/

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="accntid">Account: </label> <input id="accntid" name="taccntlist" list="accnt_list" value="" placeholder="Account" required /> <datalist id="accnt_list"> <option data-value="001">Dummy1</option> <option data-value="0000000">Dummy</option> </datalist> <input type="text" name="txtaccnt" id="accntid-hidden" readonly> <br /><br /><br /> <label for="headid">Head: </label> <input id="headid" name="txtheadlist" list="head_list" value="" placeholder="Head" required /> <datalist id="head_list"> <option data-value="1">d1</option> <option data-value="0000000000">dummy</option> </datalist> <input type="text" name="txthead" id="headid-hidden" readonly> <br /><br /><br />

Answer 1

我更改了您的 js 代码，并添加了forEach()方法，之前已经声明了对输入的调用，如下所示：

let inputs = document.querySelectorAll('input[list]');

这意味着不再需要使用e.target 。

 let inputs = document.querySelectorAll('input[list]'); inputs.forEach(function(current, index) { current.addEventListener('input', function() { list = current.getAttribute('list'), options = document.querySelectorAll('#' + list + ' option'), hiddenInput = document.getElementById(current.getAttribute('id') + '-hidden'), inputValue = current.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; } } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="accntid">Account: </label> <input id="accntid" name="taccntlist" list="accnt_list" value="" placeholder="Account" required /> <datalist id="accnt_list"> <option data-value="001">Dummy1</option> <option data-value="0000000">Dummy</option> </datalist> <input type="text" name="txtaccnt" id="accntid-hidden" readonly> <br /><br /><br /> <label for="headid">Head: </label> <input id="headid" name="txtheadlist" list="head_list" value="" placeholder="Head" required /> <datalist id="head_list"> <option data-value="1">d1</option> <option data-value="0000000000">dummy</option> </datalist> <input type="text" name="txthead" id="headid-hidden" readonly> <br /><br /><br />