选项旁边的 HTML 数据列表值

问题描述

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

我的第一个（帐户）一个工作正常，但第二个（主管）一个不工作。未为 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 />

解决方法

我更改了您的 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 />