Значения списка данных Html из массива в javascript

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

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

Мой код:

<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>

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


javascript arrays html html-datalist
person Zeeshan    schedule 29.07.2013    source источник

Ответы (5)


arrow_upward
28
arrow_downward

Я не уверен, правильно ли я понял ваш вопрос. В любом случае, попробуйте это:

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;
<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

person Andre Calil    schedule 29.07.2013
comment
спасибо за ответ, да, это работает, но я хочу спросить еще одну вещь для концепции, когда я пытался ‹html› ‹head› ‹script type=text/javascript› var mycars = new Array(); mycars[0]='Господин'; mycars[1]='Фрау'; переменные опции = ''; for(var i = 0; i ‹ mycars.length; i++) options += '‹option value='+mycars[i]+' /›'; document.getElementById('anrede').innerHTML = параметры; ‹/script› ‹/head› ‹body› ‹input name=name list=anrede /› ‹datalist id=anrede›‹/datalist› ‹/body› ‹/html› это не сработало, это ошибка - person Zeeshan; 29.07.2013
comment
это из-за того, что объект списка данных не создан, и я получаю его по идентификатору, который не был создан - person Zeeshan; 29.07.2013
comment
@Zeeshan Это не работает, потому что скрипт помещается перед элементом. Он анализируется и обрабатывается перед всей страницей. - person Andre Calil; 29.07.2013
comment
@ Zeeshan Нет проблем. Мы должны с чего-то начать, верно? знак равно - person Andre Calil; 29.07.2013

arrow_upward
38
arrow_downward

Это старый вопрос, и на него уже достаточно ответов, но я все равно добавлю здесь метод 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>

Вот скрипка.

person Paul Walls    schedule 18.02.2016
comment
Спасибо! Метод .innerHTML в принятом ответе не сработал в моей ситуации, но в вашей. - person InvictusMKS; 05.04.2021

arrow_upward
15
arrow_downward

Если вы используете 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>

person realappie    schedule 03.05.2017

arrow_upward
2
arrow_downward

Вы можете сделать это с помощью 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/

person daxur    schedule 29.07.2013
comment
когда я его выполняю, он говорит об ошибке ссылки, т.е. ReferenceError: $ не определен. - person Zeeshan; 29.07.2013
comment
Вам необходимо скачать и включить jQuery в свой проект. - person daxur; 29.07.2013
comment
да, теперь это работает... спасибо, и еще одна вещь, которую вы можете описать, это ваше предложение, что вы можете генерировать HTML прямо там (просто предложение). - person Zeeshan; 29.07.2013
comment
как вы создаете свой HTML - с помощью какой технологии? PHP, ASP.NET, ... за исключением того, что вы написали HTML вручную - тогда вы можете пока игнорировать мое предложение;) - person daxur; 29.07.2013
comment
да, я написал это вручную, и Perl выполняет только необходимую работу на стороне сервера. так что игнор :D - person Zeeshan; 30.07.2013

arrow_upward
1
arrow_downward

Более эффективный способ сделать это — использовать фрагмент.

Добавляйте элементы option к <datalist> динамически, но вместо того, чтобы добавлять каждый элемент из списка, используйте фрагмент, чтобы избежать перекомпоновки и визуализировать их в DOM только один раз.

var datalist = document.getElementById('anrede');
var fragment = document.createDocumentFragment();

var myCars = ['Herr', 'Frau'];

// Prepare the option elements to be rendered.
myCars.forEach(function(car) {
  var option = document.createElement('option');
  var text = document.createTextNode(car);

  option.value = car;
  option.appendChild(text);
  fragment.appendChild(option);
});

// Append all of them to DOM.
datalist.appendChild(fragment);
<input name="anrede" list="anrede" />
<datalist id="anrede"></datalist>

person kabirbaidhya    schedule 20.09.2020