Как заполнить параметры элемента select в javascript

Код:

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, и все будет запущено?

29
задан MD. Mohiuddin Ahmed 26 February 2019 в 07:11
поделиться

2 ответа

Другой способ сделать это:

     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. Для цикла часто более просто понять.
  2. Добавление опции во время цикла постарается не перезаписывать стили CSS, которые могут быть установлены на "избранном" уровне HTML.
  3. будет незначительно медленнее.
0
ответ дан 28 November 2019 в 01:22
поделиться

Как более 'актуальный' метод на основе @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 большие привычки войти.

0
ответ дан 28 November 2019 в 01:22
поделиться
Другие вопросы по тегам:

Похожие вопросы: