HTML: как назначить несколько значений для option в select?

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

Непосредственно задать для <option> несколько значений нельзя, однако с помощью определённых техник это можно обойти. Широко используются способы с применением data-атрибутов и конкатенации значений.

Пример с использованием data-атрибутов:

<select id="mySelect">
  <option value="1" data-info="First">Опция 1</option>
  <option value="2" data-info="Second">Опция 2</option>
</select>

Для того, чтобы обратиться к этим данным через JavaScript:

document.querySelector('#mySelect').onchange = e => {
  let info = e.target[e.target.selectedIndex].dataset.info;
  console.log(info);
};

В случае использования конкатенации значений:

<select id="mySelect">
  <option value="1,First">Опция 1</option>
  <option value="2,Second">Опция 2</option>
</select>

и соответствующий JavaScript код, который разделяет их:

document.querySelector('#mySelect').onchange = e => {
  let [id, info] = e.target.value.split(',');
  console.log(id, info);
};

Можно выбрать data-атрибуты в качестве метода, соблюдающего стандарты, или предпочесть конкатенацию для упрощения кода.

Продвинутые техники и специфические сценарии использования

JSON как инструмент для работы со сложными данными

Для сложных данных уместно применять формат JSON:

<option value='{"id":1,"info":"First","details":"More info"}'>Опция 1</option>

и JavaScript для конвертации данных в формате JSON:

document.querySelector('#mySelect').onchange = e => {
  let data = JSON.parse(e.target.value);
  console.log(data.id, data.info, data.details);
};

Подробнее об этом расскажет наш спикер на видео

Использование скрытых полей

Можно задействовать скрытые поля для сопоствления данных:

<select id="mySelect">
  <option value="1">Опция 1</option>
  <option value="2">Опция 2</option>
</select>
<input type="hidden" id="info" name="info">

и сделать их синхронизацию:

document.querySelector('#mySelect').onchange = e => {
  document.querySelector('#info').value = data[e.target.value];
};

Метод "скрытых карманов" с использованием data-атрибутов

Data-атрибуты могут служить для приписывания дополнительной информации:

<option value="1" data-city="New York" data-doj="2023-01-01">Опция 1</option>

и для их извлечения:

let option = document.querySelector('#mySelect option[value="1"]');
console.log(option.dataset.city, option.dataset.doj);

Взаимодействие с серверным кодом

Сервер должен быть приготовлен к обработке сложных значений, например, с применением PHP:

list($id, $info) = explode(',', $_POST['selectValue']);
$data = json_decode($_POST['selectValue']);

Структура получаемых данных должна быть удобной для дальнейшей работы.

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

Представьте себе, что каждый элемент option – это почтовый ящик, в котором лежат несколько писем:

<select>
  <option value="1,Priority">Ваша посылка</option>
  <option value="2,Express">Ваша посылка</option>
  <option value="3,Standard">Ваша посылка</option>
</select>

Такой подход позволяет нам хранить различные данные в рамках одного элемента.

Лучшие практики и советы

Организованность кода

Код следует поддерживать упорядоченным и понятным для облегчения чтения и последующего масштабирования.

UX: улучшение взаимодействия с пользователем

Ваше решение должно способствовать удобству пользовательского интерфейса, поэтому следует стремиться к максимальной простоте его использования.

Тестирование на совместимость

Проверяйте работу вашего решения в различных браузерах и средах, удостоверьтесь в его корректной работе.

Важность эффективности

С увеличением количества компонентов на странице становится важной оптимизация производительности JavaScript.

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

1. <option>: HTML-элемент Option – MDN — подробное описание <option>.
2. HTML-тег select — интерактивное обучение и примеры использования <select>.
3. HTML Standard — официальное определение функционирования <select>.
4. Полное руководство по элементу Table | CSS-Tricks — взгляд на представление данных с помощью таблицы.
5. Узнайте о формах | web.dev — лучшие практики и современные методы работы с формами.
6. Dropdowns на примере Suckerfish – A List Apart — обзор создания расширяемых выпадающих списков.