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]='Frau'; var options = ''; 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, можете да го направите по този начин, това са техники на Paul Walls със синтаксис на 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

Що се отнася до стандарт C, той просто не е специфициран, защото не може да се наблюдава. Веднага щом free паметта, всички указатели, сочещи там, са невалидни, така че няма начин да проверите тази памет.*)

Дори ако случайно имате някаква стандартна C библиотека, документираща определено поведение, вашият компилатор все още може да приеме, че указателите не се използват повторно, след като бъдат предадени на free, така че все още не можете да очаквате конкретно поведение.

*) Мисля, че дори четенето на тези указатели е UB, не само дерефериране, но това така или иначе няма значение тук.

- 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

По-ефективен начин да направите това е да използвате фрагмент.

Добавете елементите на опцията към <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