Значения HTML datalist из массива в javascript

У меня есть простая программа, которая должна принимать значения из текстового файла на сервере, а затем заполнять datalist как выделение в текстовом поле ввода.

для этой цели первым шагом, который я хочу сделать, является то, что я хочу знать, как массив javascript может использоваться в качестве параметров datalist динамически.

мой код :

<html>  
<script>

var mycars = new Array();
mycars[0]='Herr';
mycars[1]='Frau';

</script>

<input name="anrede" list="anrede" />
<datalist id="anrede">
 <option value= mycars[0]></option>
 <option value="Frau"></option> 
</datalist>
</html>

Я хочу заполнить текстовое поле ввода, содержащее datalist как предложение из массива. Также здесь Я не учитываю значения массива. На самом деле мне нужны не два параметра datalist, а dxnamic в зависимости от длины массива

12
arrays html-datalist html5 javascript

4 ответов

Я не уверен, что ясно понял ваш вопрос. Во всяком случае, попробуйте следующее:

<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

<script type="text/javascript">
  var mycars = new Array();
  mycars[0]='Herr';
  mycars[1]='Frau';

  var options = '';

  for(var i = 0; i < mycars.length; i++)
    options += '<option value="'+mycars[i]+'" />';

  document.getElementById('anrede').innerHTML = options;
</script>
12

Это старый вопрос и уже достаточно ответили, но я собираюсь бросить метод DOM здесь в любом случае для тех, кто не любит использовать буквальный HTML.

<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

<script>
var mycars = ['Herr','Frau'];
var list = document.getElementById('anrede');

mycars.forEach(function(item){
   var option = document.createElement('option');
   option.value = item;
   list.appendChild(option);
});
</script>

вот скрипка.

23

Если вы используете ES6, вы можете сделать это таким образом, это методы пола Уоллса с синтаксисом ES6.

const list = document.getElementById('anrede'); 

['Herr','Frau'].forEach(item => {
  let option = document.createElement('option');
  option.value = item;   
  list.appendChild(option);
});
<input name="car" list="anrede" />
<datalist id="anrede"></datalist>
5

вы можете сделать это в jQuery, но с другой стороны, поскольку вы обрабатываете данные на сервере, вы можете генерировать HTML прямо там (просто предложение).

<script>

var mycars = new Array();
mycars[0]='Herr';
mycars[1]='Frau';

$(document).ready( function() {
    $(mycars).each( function(index, item) {
        var option = $('<option value="'+item+'"></option>');
        $('#anrede').append(option);
    });
});

</script>

<input name="anrede" list="anrede" />
<datalist id="anrede">
    <!-- options are filled in the script -->
</datalist>

вот JSFiddle с этим кодом, поэтому вы можете немедленно попробовать:http://jsfiddle.net/mBMrR/

1