JavaScript: создание опций в select от 12 до 100

Быстрый ответ

Чтобы добавить варианты выбора в элемент <select>, создайте новые экземпляры Option и внесите их в список:

var select = document.getElementById("mySelect"); // Ищем элемент по ID
select.add(new Option("Текст варианта", "Значение варианта")); // Вносим новый элемент в список

Такой подход позволяет легко вставить новый вариант в <select> с указанным идентификатором id="mySelect".

Детальный метод создания вариантов

Использование for цикла упрощает добавление нескольких значений в <select>:

var select = document.getElementById('mainSelect');
for (var i = 12; i <= 100; i++) {
  var option = new Option(i, i);
  select.add(option);
} // Молниеносно добавляем сто вариантов!

Таким образом, вы сможете мгновенно создать большое количество вариантов выбора.

Повышаем производительность с помощью Fragment

Для увеличения производительности при добавлении множества вариантов, используйте DocumentFragment:

var select = document.getElementById('mainSelect');
var fragment = document.createDocumentFragment();
for (var i = 12; i <= 100; i++) {
  var option = new Option(i, i);
  fragment.appendChild(option);
}
select.appendChild(fragment); // Весь список добавляется за одну операцию!

Этот метод помогает устранить множественные перерисовки и ускоряет выполнение скрипта.

Универсальная функция для создания вариантов выбора

Вы можете создать функцию, которая сможет использоваться многократно для заполнения любого элемента <select>, передав ей идентификатор и диапазон значений:

function populateSelect(id, min, max) {
  var select = document.getElementById(id);
  var fragment = document.createDocumentFragment();

  for (var i = min; i <= max; i++) {
    var option = new Option(i, i);
    fragment.appendChild(option);
  }

  select.appendChild(fragment); // Варианты выбора добавляются как по магии!
}

populateSelect('mainSelect', 12, 100); // Всё готово! Теперь у нас есть список вариантов выбора.

Функция позволяет автоматизировать и ускорить процесс заполнения элементов <select>.

Создание вариантов из динамических данных

Если требуется создавать варианты на основе динамических данных, вот как это можно осуществить:

var select = document.getElementById('dynamicSelect');
var items = ['Яблоко', 'Банан', 'Вишня'];
items.forEach(function(item) {
  select.add(new Option(item, item.toLowerCase())); // Вносим в список вкусные варианты!
});

Для каждого элемента массива создается соответствующий вариант выбора, который затем добавляется в выпадающий список.

Визуализация

Добавление вариантов выбора в элемент <select> можно сравнить с украшением писем любимыми эмодзи:

Выпадающий список 🦾: []

Применим немного JavaScript в виде эмодзи (😉):

var select = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "👾 Боярышник";
select.add(option);

И теперь при выборе:

🦾: [👾, 🚀, 🌖]
// Вы получили список из трех уникальных символов! Это не скучно!

Метод .createElement("option") предоставляет вам множество возможностей для настройки выпадающего списка.

Использование конструктора Option для удобства

Конструктор Option предлагает элегантный способ создания новых вариантов выбора:

select.add(new Option("Текст для отображения", "valueProperty")); // Добавление варианта теперь стало проще!

Этот метод подойдет, когда вам нужно быстро добавить один или пару вариантов выбора, не используя createElement.

Конкатенация строк для увеличения производительности

В ситуациях, когда требуется оптимизация производительности, построение строки с вариантами выбора может быть особенно эффективным:

var selectHTML = "";
for (var i = 1; i <= 10; i++) {
  selectHTML += `<option value="${i}">Вариант ${i}</option>`;
}

document.getElementById("mySelect").innerHTML = selectHTML; // Заполняем список быстро и эффективно!

Обратите внимание, что данный метод заменяет весь существующий контент списка и может привести к потере обработчиков событий уже добавленных элементов.

Расширение прототипа для дополнительного удобства

Добавление метода populate для элемента HTMLSelectElement может упростить работу:

HTMLSelectElement.prototype.populate = function(min, max) {
  var fragment = document.createDocumentFragment();
  
  for (var i = min; i <= max; i++) {
    var option = new Option(i, i);
    fragment.appendChild(option);
  }

  this.appendChild(fragment); // Используем новый метод для добавления вариантов выбора!
};

document.getElementById("mySelect").populate(1, 10); // И вот ваш список наполнен благодаря JavaScript-магии!

Теперь вы без проблем можете добавить метод для заполнения элемента <select> вариантами выбора в любом таком элементе.

Полезные материалы

1. <select>: Элемент Select – HTML | MDN — Подробное руководство по <select>.
2. Создание выпадающего списка с CSS и JavaScript на W3Schools — Уроки по разработке выпадающих списков с CSS и JavaScript.
3. Создание списка на основе массива с помощью JavaScript — Примеры кода из реальных проектов для создания выпадающих списков из массивов данных.
4. Позиционирование курсора в документе и элементе — Наглядные примеры кода для добавления вариантов выбора в список.
5. Обработка событий в JavaScript от Flavio Copes — Познакомьтесь поближе с системой событий JavaScript, благодаря которой можно создавать динамические варианты выбора.
6. Манипуляция атрибутами, классами и стилями в DOM на DigitalOcean — Узнайте, как наиболее эффективно управлять HTML-элементами при помощи JavaScript, это ключ к добавлению динамических вариантов выбора в <select>.