Значение DataList получено из JavaScript, возвращая неопределенное

Question

Я создаю на своей веб-странице список данных, который получает его значения из массива JavaScript (который получает данные из массива Java с использованием JSP).

Вот мой код для заполнения списка данных:

<input name="Engineer Name" list="engineer" />
<datalist id="engineer"></datalist>
<script>
  //Take the engineers array and transfer to javascript array
  //This is so we can source the Engineer Drop-Down menu from a file dynamically
  var engineerArray = [];
  <% for (int i=0; i<engineers.size(); i++) { %>
  engineerArray[<%= i %>] = "<%= engineers.get(i) %>";
  <% } %>

  for (var i in engineerArray) {
    var datalist = document.getElementById('engineer');
    datalist.innerHTML += '<option value=' + engineerArray[i] + '>';
  }
</script>

Этот код правильно отображает список данных, но при отправке формы я вызываю другую функцию JavaScript, которая содержит строку:

var engineer = document.getElementById('engineer').value;

И это значение в конечном итоге undefined,

Answer 1

Вы пытаетесь получить значение datalist неправильно. Селектор должен быть на input элемент. Я изменил код для справки:

<input name="Engineer Name" id="engineerList" list="engineer" />
<datalist id="engineer"></datalist>
<script>
  //Take the engineers array and transfer to javascript array
  //This is so we can source the Engineer Drop-Down menu from a file dynamically
  var engineerArray = [];
  <% for (int i=0; i<engineers.size(); i++) { %>
  engineerArray[<%= i %>] = "<%= engineers.get(i) %>";
  <% } %>

  for (var i in engineerArray) {
    var datalist = document.getElementById('engineer');
    datalist.innerHTML += '<option value=' + engineerArray[i] + '>';
  }
</script>

Затем получите значение списка данных, указав правильный id:

var engineer = document.getElementById('engineerList').value;