Я хочу, чтобы этот javascript создавал параметры от 12 до 100 для выбора с id = "mainSelect", потому что я не хочу создавать все теги параметров вручную. Можете ли вы дать мне несколько советов? Спасибо
function selectOptionCreate() {
var age = 88;
line = "";
for (var i = 0; i < 90; i++) {
line += "<option>";
line += age + i;
line += "</option>";
}
return line;
}
javascript
html
Джек Потрошитель
источник
источник
mySelect.options[mySelect.options.length] = new Option('Text 1', 'Value1');
Ответы:
Вы можете достичь этого с помощью простого
for
цикла:JS Fiddle demo .
JS Perf сравнил мой ответ и ответ Симе Видаса , потому что я думал, что он выглядел немного более понятным / интуитивным, чем мой, и мне было интересно, как это отразится на реализации. По словам Chromium 14 / Ubuntu 11.04, мой работает несколько быстрее, хотя другие браузеры / платформы, вероятно, будут иметь разные результаты.
Отредактировано в ответ на комментарий от OP:
JS Fiddle demo .
И, наконец (после довольно большой задержки ...), подход, расширяющий прототип для
HTMLSelectElement
того, чтобы связатьpopulate()
функцию как метод с узлом DOM:JS Fiddle demo .
Ссылки:
node.appendChild()
,document.getElementById()
,element.innerHTML
,источник
innerText
вместо того,innerHTML
чтобы избежать уязвимостей межсайтового скриптинга. Как вы думаете, @DavidThomas?Ну вот:
Живая демоверсия: http://jsfiddle.net/mwPb5/
Обновление: так как вы хотите повторно использовать этот код, вот функция для него:
Использование:
Живая демоверсия: http://jsfiddle.net/mwPb5/1/
источник
Наиболее кратким и интуитивным способом будет:
Вы также можете различать имя и значение или добавлять элементы в начале списка с дополнительными параметрами к используемым функциям:
HTMLSelect Element .add (item [, before]);
новая опция (текст, значение, defaultSelected, selected);
источник
Я не рекомендую делать DOM-манипуляции внутри цикла - это может дорого обойтись в больших наборах данных. Вместо этого я бы сделал что-то вроде этого:
Вы можете прочитать больше о DocumentFragment на MDN , но вот суть этого:
источник
Единственное, чего я бы хотел избежать, это делать операции DOM в цикле, чтобы избежать повторного рендеринга страницы.
Редактировать: удалил функцию, чтобы показать, как вы можете просто назначить созданный html-код другому элементу выбора - таким образом, избегая ненужного зацикливания, повторяя вызов функции.
источник
Смотрите: Каков наилучший способ добавить опции для выбора из массива с помощью jQuery?
источник
Когда вы создаете новый
Option
объект, нужно передать два параметра: первый - это текст, который вы хотите отобразить в списке, а второй - значение, которое будет назначено параметру.Затем вы просто назначаете этот
Option
объект пустому элементу массива, например:источник
Ни одно из вышеперечисленных решений не помогло мне. Метод добавления не выдал ошибку, когда я пытался, но это не решило мою проблему. В конце концов я решил свою проблему со свойством data select2. Я использовал json и получил массив, а затем передал его в элемент select2 initialize. Более подробно вы можете увидеть мой ответ в посте ниже.
https://stackoverflow.com/a/41297283/4928277
источник
Часто у вас есть массив связанных записей, и я считаю, что заполнить
select
этот путь легко и довольно декларативно :Это заменит существующие опции.
Вы можете использовать,
selectEl.insertAdjacentHTML('afterbegin', str);
чтобы добавить их в топ вместо.И
selectEl.insertAdjacentHTML('beforeend', str);
добавить их в конец списка.IE11-совместимый синтаксис:
источник