Тотальная інструкція по елементу Select у JavaScript

Сьогодні я розповім про елемент select. Ви навчитеся:

• отримувати значення обраного значення
• отримувати текст вибраного значення
• отримувати всі option select
• змінювати вибране значення через JS
• визначати обране значення за замовчуванням
• створювати select через JavaScript на основі об'єкта
• розберемося в порядку відображення option
• навчимося керувати порядком відображення option через JS
• навчимося створювати select із заданим порядком option за допомогою масиву
• додавати додаткові атрибути до 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. З одного боку це очевидно, але з іншого боку в складних програмах модель даних відрізнятиметься від того, що бачать користувачі, і відрізнятиметься дуже сильно. Допустимо tic-tac-toe програмується за допомогою масивів і зовнішній вигляд даних у програмі зовсім не схожий на гру.

Така розбіжність між ВИДОМ і МОДЕЛЮ закладена вже тут. Але що робити якщо з 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);

Навіть значення можна витягнути, хоча (див. початок статті) є і більш прості шляхи:

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 буде обрано під час завантаження сторінки. Відмінно, але чи можна встановити вибране значення за допомогою JS? Так, просто надамо потрібний 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 з пропозицією вибрати щось із списку. Далі можна продати два варіанти:

1. Змусити вибрати обов'язково щось зі списку.
2. Дозволити користувачеві нічого не вибирати.

Другий варіант ми вже зробили за допомогою 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. Може здатися, що алфавітний порядок, але дещо складніше.

Такий порядок виведення пов'язаний з тим, як JavaScript перебирає об'єкт циклом. І хоча однозначної визначеності порядку в об'єкті, але якщо у нас рядкові рядки - то порядок у більшості браузерів визначається по порядку додавання в об'єкт. Однак якщо ключі – числові рядки, то у нас йде порівняння за числами ключів. Саме цю ситуацію ми й спостерігаємо тут.

На жаль, всі подібні "угоди і спостереження" не дозволяють задати жорсткий порядок. Тому або додавати милиці (наприклад, перед ключами дописати 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, з якими може зіткнутися фронтенд програміст. Якщо щось не зрозуміли - перегляньте відео з цього уроку.