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 />

HTML 选项旁边的数据列表值

HTML Datalist value beside the option

javascript

html-select

input

html-datalist