Ответ 1

Вы можете создать опцию внутри цикла;

for(element in langArray)
{
   var opt = document.createElement("option");
   opt.value= index;
   opt.innerHTML = element; // whatever property it has

   // then append it to the select element
   newSelect.appendChild(opt);
   index++;
}

// then append the select to an element in the dom

Ответ 2

Вам нужно создать свой элемент option внутри вашего цикла, установить атрибуты и текст и добавить его в элемент select:

var select = document.createElement('select'),
    option,
    i = 0,
    il = langArray.length;

for (; i < il; i += 1) {
    option = document.createElement('option');
    option.setAttribute('value', langArray[i].value);
    option.appendChild(document.createTextNode(langArray[i].text));
    select.appendChild(option);
}

Это предполагает, что ваш langArray выглядит примерно так:

var langArray = [
    {value: "val1", text: "text 1"},
    {value: "val2", text: "text 2"}
];

Вам нужно будет настроить код в соответствии с вашим массивом

Ответ 3

    var dynamicSelect = document.getElementById("selectID");

        langArray.forEach(function(item){ 
        {
                var newOption = document.createElement("option");
                newOption.text = item.toString();//item.whateverProperty

                dynamicSelect.add(newOption);

                //new select items should populated immediately
        });

Ответ 4

Грязный вариант - использовать div и заполнять строку выбора (innerHTML) на основе предыдущего выбора. Вы все еще можете использовать langArray, как указано выше.

Ответ 5

Еще один способ сделать это:

     for (let i = 0; i < langArray.length; i++) {
        let opt = document.createElement("option");
        opt.value = langArray[i].id; //or i, depending on what you need to do
        opt.innerHTML = langArray[i].name; 
        $('#some-input').append(opt); //Chuck it into the dom here if you want
     } 

1. Цикл for часто проще понять.
2. Добавление параметра во время цикла позволит избежать перезаписи стилей CSS, которые могут быть установлены на уровне "select" HTML.
3. Будет немного медленнее.

Ответ 6

В качестве более современного метода, основанного на ответе @Ibu (в настоящее время принятого и абсолютно корректного), вы можете использовать метод forEach в JavaScript, например:

let select_elem = document.createElement('select');

langArray.forEach((element, index) => {
  let option_elem = document.createElement('option');

  // Add index to option_elem
  option_elem.value = index;

  // Add element HTML
  option_elem.textContent = element;

  // Append option_elem to select_elem
  select_elem.appendChild(option_elem);
});

Использование метода forEach отслеживает его собственный индекс, а это означает, что вам не нужно вручную отслеживать свой индекс (используя что-то вроде var i=0; [...] i++) и является - я бы сказал, - более аккуратным и более удобным, чем for цикл. В конце концов, вам не нужно создавать какие-либо переменные вне цикла или вручную увеличивать эти переменные, и, следовательно, меньше вероятность конфликтов, если переменная индекса (скажем, var i) используется в другом месте (например, если у вас есть цикл внутри цикла).

Следует отметить, что эта рекомендация приходит в контексте - в конечном счете, будут контексты, когда цикл for является лучшим выбором, и когда цикл forEach будет лучшим выбором. Поскольку я лично отдаю предпочтение удобству обслуживания по скорости, я бы по умолчанию выбрал цикл forEach. Но это не значит, что это правильный или единственный правильный ответ. Всегда, всегда, ВСЕГДА учитывайте ваши требования к личному использованию над рекомендациями любого человека в Интернете.

Я также поменял innerHTML на textContent. В конечном счете, содержимое в опции всегда будет текстовым (вы не можете добавить HTML к опции), поэтому использование textContent более наглядно описывает то, что вы в конечном итоге собираетесь делать. И textContent является более производительным, чем innerHTML, поскольку он не анализирует подаваемые данные. Фактически, тест показывает, что простое изменение innerHTML на textContent может повысить производительность более чем в 2,5 раза.

Таким образом, это, вероятно, будет более производительным и более удобным для тех, кто читает ваш код в будущем. В этом случае, в отличие от цикла for, я не вижу преимуществ в том, чтобы не использовать textContent над innerHTML.

Производительность

Следует отметить, что циклы for-in более производительны, чем циклы forEach. Хотя это несколько тривиально (особенно с учетом контекста), и, по моему мнению, вы всегда должны отдавать предпочтение удобству обслуживания, а не просто скорости... если производительность не является жизненно важным критерием для того, что вы делаете (например, если вы перебираете более 1000 с) ценностей регулярно и испытывают узкие места). Хотя, как говорится в старой поговорке, "преждевременная оптимизация - корень всего зла".

В конечном счете, разработчики JS будут работать над повышением производительности наиболее часто используемых конструкций, и снижение производительности в большинстве случаев будет незначительным и, вероятно, со временем уменьшится, поскольку устройства станут более мощными, а синтаксические анализаторы будут еще более оптимизированы.

Однако производительность приложения, которое не может быть легко поддержано, может быть очень высокой. И будет только расти, так как плохая ремонтопригодность предшествует большему количеству ошибок, появляющихся со временем. Бритье на 0,002 мсек от циклы сейчас не окажет заметного влияния на будущее. Будущий разработчик, пытающийся добавить тег <strong> к элементу <option>, потому что они прочитали innerHTML = ... и предположили, что могут добавить HTML, окажут влияние в будущем.

Примечание для старых браузеров

Метод forEach работает во всех вечнозеленых браузерах, но не в IE11 или ниже. Для этого вам потребуется либо заполнить полифайл, либо использовать сервис, такой как Babel, чтобы скомпилировать код в формат, предшествующий ES6.

Вам также может понадобиться изменить ключевое слово let на var и для старых браузеров. Ключевое слово let работает в IE11, хотя и имеет ряд проблем. Если вам не требуется поддержка более старых браузеров, использование ключевых слов let и const - отличная привычка.