Значение списка данных 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 />

javascript input html-select html-datalist

26.12.2020 11:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

364

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 />

26.12.2020 12:05

Другие вопросы по теме

Как изменить ширину границы при фокусировке

Движение камеры от третьего лица с использованием Rigidbody + новая система ввода + Cinemachine

Ввод React сохраняет ввод при первом щелчке, а затем показывает его в пользовательском интерфейсе при втором щелчке... ПОЧЕМУ?!!! и как это исправить

Исключение несоответствия ввода

Форма Razor не отображает все входные данные (@Html.EditorFor) даже после копирования/вставки кода

Ввод на языке c

Проверка, является ли число числом Армстронга или нет в C

Получить тип файла в реакции js

Как добавить только нижнюю границу к полям ввода в tkinter?

Как проверить введенное пользователем имя?

Значение списка данных HTML рядом с параметром

Ответы 1

Другие вопросы по теме

Похожие вопросы