Код:
var newSelect=document.createElement('select');
index=0;
var optn = document.createElement("option");
//langArray is an array that contains different items..the size
//is not fixed for this array.
for(element in langArray)
{
//Now i want to assign each item in langArray to each option tag
//will it be sumthng like "optn.options[index]=new Option("Sports", "sportsvalue", true, false);
//optn.accept(langArray[0]);
index++;
}
Я пытаюсь получить параметры, заполненные таким образом, но у меня все не получается, поскольку я не знаю, как заполнить параметры из массива в JS. Нужно ли мне вообще использовать цикл или я могу просто назначить langArray какому-то свойству элемента select, и все будет запущено?
Другой способ сделать это:
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
}
Как более 'актуальный' метод на основе @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
для [1 110]. В конечном счете содержание в опции всегда будет текстом (Вы не можете добавить, HTML к опции) настолько использующий textContent
является более описательным к тому, что Вы в конечном счете собираетесь быть выполнением. И textContent
более производительно, чем [1 113], поскольку это не анализирует подаваемые данные. На самом деле сравнительный тест показывает, что просто изменение innerHTML
к [1 115] может улучшать производительность по x2.5.
Как таковой это, вероятно, будет больше производительным и более удобный в сопровождении для тех, которые читают Ваш код в будущем. В этом экземпляре, в отличие от этого, с for
цикл, я не вижу преимущества для [1 136] не использование textContent
более чем [1 118].
Одна вещь отметить состоит в том, что for-in
циклы более производительны, чем [1 120] циклы. Хотя это несколько тривиально (особенно учитывая контекст), и по-моему необходимо всегда располагать по приоритетам пригодность для обслуживания по простой скорости..., если производительность не является жизненными критериями того, что Вы делаете (как, например, если Вы выполняете итерации за 1000-е значений регулярно и испытываете узкие места). Как говорится, хотя, "преждевременная оптимизация является корнем всего зла".
В конечном счете, специалисты по обслуживанию JS будут работать для увеличения производительности наиболее используемых конструкций, и хит производительности в большинстве случаев будет незначителен и будет, вероятно, уменьшаться со временем, поскольку устройства становятся более мощными, и синтаксические анализаторы навсегда оптимизированы.
производительность приложения, которое не может с готовностью сохраняться, однако, может быть очень высокой действительно. И будет только когда-либо повышаться, поскольку плохая пригодность для обслуживания предшествует большему количеству ошибок, представляемых со временем. Бритье 0,002 мс от цикла теперь не будет иметь любые значимые продвижения влияния. Будущий разработчик, пытающийся добавить <strong>
тег к <option>
, элемент, потому что они читают, innerHTML = ...
и предположили, что могли добавить HTML , будет оказывать влияние продвижения.
forEach
метод работает во всем вечнозеленые браузеры , но не в IE11 или ниже. Для этого Вы должны будете или полизаполнить или использовать сервис как [1 133] Babel для компиляции кода в формат pre-ES6.
Вы, возможно, также должны измениться let
ключевое слово к [1 126] для более старых браузеров также. let
ключевое слово делает работа в IE11, хотя это имеет много проблем. Если Вы не требуете поддержки более старых браузеров, хотя, с помощью ключевых слов let
и const
большие привычки войти.