javascript - 一些具有隐藏值的数据列表标签

Question

我在这里找到了代码:

<form action="<?php echo $adresstrust; ?>" method="post" >
    <input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
    <option data-value="42">The answer</option>
    <option data-value="43">The answer3</option>
    <option data-value="44">The answer4</option>
</datalist>

<input list="suggestionList2" id="answer2Input">
<datalist id="suggestionList2">
    <option data-value="42">The answer</option>
    <option data-value="43">The answer3</option>
    <option data-value="44">The answer4</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">
<input type="hidden" name="answer2" id="answer2Input-hidden">
<input type="hidden" name="ala" value="tutaj">
<input type="submit" name="" value="Start">
</form>
<script type="text/javascript">
    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;
        }
    }
});
</script>

干得很好。但是，当我添加第二个数据列表代码时，仅向我发送第一个数据列表中的值。如何让它从一些数据列表中向我发送值(value)？

Answer 1

要实现此目标，您需要将事件处理程序分配给您希望包含此功能的所有合适的 input 元素。使用 querySelectorAll 获取这样的节点列表并迭代以分配您的 input 事件处理程序。

为了简洁和方便，我简化了 ID/data-ids。 Dataset 属性可以重复，因此可以在多个元素上使用 data-id=x，而使用 id=x 是不合法的> 不止一个。这有助于稍后选择隐藏元素并且意味着更简单的 HTML 代码。

整个 inputhandler 函数中的注释应该有助于阐明每个点发生的情况。

document.addEventListener('DOMContentLoaded',(e)=>{

  const inputhandler=function(e){
    // Find the appropriate datalist associated with current text input element.
    let list=document.querySelector( 'datalist#' + this.getAttribute('list') );
    // Find all the options within this datalist.
    let options=list.querySelectorAll('option');
    // Find the appropriate hidden input field based upon list attribute from current text input element.
    let input=document.querySelector('input[type="hidden"][ data-list="'+this.getAttribute('list')+'" ]');

    // Set the value of the hidden input to that of text element.
    input.value=this.value;

    // Iterate through `some` of the options - stop when a condition is met.
    Array.from( options ).some( opt=>{
      if( opt.textContent.trim()===this.value.trim() ){
        // condition has been satisfied - set hidden input element value
        input.value=opt.dataset.value;

        // display formatted message in the console
        console.log(
          'The hidden field "%s" has been assigned "%s" as it\'s new value',
          input.name,
          input.value
        );

        // stop iteration of nodelist - job done.
        return true;
      }
    })
  };

  document.querySelectorAll( 'input[list]' ).forEach( input=>input.addEventListener('input',inputhandler));
})

<form method='post' action="<?php echo $adresstrust; ?>">
  <input type='text' list='list1' />
  <datalist id='list1'>
    <option data-value='42'>The answer
    <option data-value='43'>The answer3
    <option data-value='44'>The answer4
  </datalist>

  <input type='text' list='list2' />
  <datalist id='list2'>
    <option data-value='42'>The answer
    <option data-value='43'>The answer3
    <option data-value='44'>The answer4
  </datalist>

  <input type='hidden' name='answer' data-list='list1' />
  <input type='hidden' name='answer2' data-list='list2' />

  <input type='hidden' name='ala' value='tutaj' />
  <input type='submit' value='Start' />
</form>