Тотальное руководство по элементу Select в JavaScript
Сегодня я расскажу все про элемент select. Вы научитесь:
- получать value выбранного значения
- получать текст выбранного значения
- получать все option select
- изменять выбранное значение через JS
- задавать выбранное значение по умолчанию
- создавать select через JavaScript на основе объекта
- разберемся в порядке отображения option
- научимся управлять порядком отображения option через JS
- научимся создавать select с заданным порядком option c помощью массива
- добавлять дополнительные атрибуты к option
Немало. Все это позволит закрыть любые кейсы по применению select во фронтенде. Потратим 15 минут на обучение? Риторический вопрос, поехали...
Получаем значение value из select
Самый простой пример, получить значение value выбранного элемента select. Здесь все достаточно просто, допустим в HTML такой код:
<select class="select-1">
<option value="222">Two</option>
<option value="333">Three</option>
<option value="444">Four</option>
<option value="555">Five</option>
</select>Для получения значения можно сделать так:
const select = document.querySelector('.select-1');
select.onchange = function() {
let item = select.value;
console.log(item);
}Почему я люблю данный пример? Все просто, данный select показывает разницу между логикой программы и представлением (видом). Пользователь видит текст: Two, Three, а программа работает с 222, 333, 444. С одной стороны это очевидно, но с другой стороны в сложных программах модель данных будет отличаться от того, что видят пользователи, и отличаться очень сильно. Допустим крестики-нолики программируется с помощью массивов и внешний вид данных в программе совсем не похож на игру.
Такое расхождение между ВИДОМ и МОДЕЛЬЮ заложено уже здесь. Но что же делать если из select нужно срочно получить именно текст, а не value?
Получаем текст выбранного option из select
Итак, нужен текст и никак иначе. Пусть верстка остается аналогичной. Для начала научимся получать номер (индекс) выбранного option:
// индекс выбранного option
let selectedIndex = select.selectedIndex;супер, теперь получим коллекцию всех option:
let options = select.options;Если есть коллекция и индекс, то дальше все просто. Выбранный option со всеми атрибутами будет:
options[selectedIndex]если нам нужно текст, то
let text = options[selectedIndex].textContent;
console.log(text);Даже value можно вытянуть, хотя (см. самое начало статьи) есть и более простые пути:
let value = options[selectedIndex].value;
console.log(value);Как задать активный option в select
Посмотрите на страницу. Какой option выводится в select? Тот, который прописан первым в верстке. Но это не всегда удобно. Научимся задавать то значение, которое нужно нам.
Для начала сделаем так, чтобы нужное значение стояло по умолчанию. Для этого добавим атрибут selected в верстку и проверим.
<select class="select-1">
<option value="222">Two</option>
<option value="333">Three</option>
<option value="444" selected>Four</option>
<option value="555">Five</option>
</select>теперь Four будет выбран при загрузке страницы. Отлично, но можно ли задать выбранное значение с помощью JavaScript? Да, просто присвоим нужный value:
const select = document.querySelector('.select-1');
select.value = 555;и select автоматически сделает активным option с этим value.
Задать пустое значение при загрузке
Допустим вы не хотите задавать какой-то option, возможно, что данные значения пользователь может пропустить - не выбирать. Как быть тогда? Применим атрибут disable:
<select class="select-3">
<option value="" selected disabled>Choose symbol</option>
<option value="bbbbb">B</option>
<option value="ccccc">C</option>
<option value="ddddd">D</option>
<option value="eeeee">E</option>
</select>Теперь выводится пустой option с предложением выбрать что-либо из выпадающего списка. Далее возможно реализовать два варианта:
- Заставить выбрать обязательно что-либо из списка.
- Разрешить пользователю ничего не выбирать.
Второй вариант мы уже сделали с помощью disabled, а первый будет реализован добавлением hidden атрибута. Вот так:
<option value="" selected disabled hidden>Choose symbol</option>после того как пользователь откроет список - пустой option исчезнет, и пользователь будет обязан выбрать вариант.
Создание select с помощью JavaScript на основе объекта
Научимся создавать выпадающий список с помощью объекта. Техническая сторона довольно простая:
const city = {
"756135": "Warsaw",
"703448" : "Kyiv",
"3067696" : "Prague",
}
const select4 = document.createElement('select');
for (let id in city) {
console.log(id);
const option = document.createElement('option');
option.value = id;
option.text = city[id];
// select4.prepend(option); // убыванию
select4.append(option); // возрастанию
}
document.querySelector('.out-4').append(select4);а вот вывод - довольно интересный. В выпадающем списке первым отобразиться Kyiv, потом Warsaw, потом Prague. Может показаться, что алфавитный порядок, но все чуть сложнее.
Такой порядок вывода связан с тем, как JS перебирает циклом объект. И хотя однозначной определенности порядка в объекте, но если у нас ключи строковые - то порядок в большинстве браузеров определяется по порядку добавления в объект. Однако если ключи - числовые строки, то у нас идет сравнение по числам ключей. Именно данную ситуацию мы и наблюдаем тут.
Увы все подобные "соглашения и наблюдения" не позволяют задать жесткий порядок. Поэтому либо добавлять костыли (например, перед ключами дописать id_) либо менять подход.
Создание select с точным порядком option
Давайте сделаем код, который позволит обеспечить точный порядок option в выпадающем списке, который создан с помощью JavaScript. Для начала трансформируем объект из примера выше в массив вида:
const city2 = [
{ "city" : "Warsaw", "id" : "756135"},
{ "city" : "Kyiv", "id" : "703448", "selected" : true},
{ "city" : "Prague", "id" : "3067696"}
];Каждый из вложенных объектов имеет числовой индекс, таким образом задаем точный порядок. Также, если вы заметили, такой подход позволяет добавлять дополнительные атрибуты, типа selected.
Реализуем перебор массива:
const select6 = document.createElement('select');
for (let i = 0; i < city2.length; i++) {
const option = document.createElement('option');
option.value = city2[i].id;
option.text = city2[i]['city'];
// if (city2[i].selected) option.selected = true;
select6.append(option);
}
document.querySelector('.out-6').append(select6);Как видно теперь мы полностью контролируем порядок option внутри select.
Подведем небольшой итог. Мы рассмотрели все кейсы работы с select, с которыми может столкнуться фронтенд программист. Если что-то не поняли - посмотрите видео по данному уроку.
