Урок: сравнить подпись option и значение select

Назначение

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

Как это работает

Создайте select id value-topic с несколькими option и явными value. Код читает выбранную option, её текст и значение всего select. Выполняйте его после разметки в своей странице.

Пример

const select = document.querySelector("#value-topic");
function reportChoice() {
  const option = select.selectedOptions[0];
  console.log({value:select.value, text:option?.textContent.trim(), index:select.selectedIndex});
}
select.addEventListener("change", reportChoice);
reportChoice();

Что должно получиться

При смене выбора журнал показывает код, подпись и индекс. Код может оставаться неизменным после перевода подписи, а индекс зависит от порядка вариантов.

Граница применения и частая ошибка

Для multiple select.value показывает только одно значение: полный выбор требует обхода selectedOptions или FormData.getAll. Если value у option не задан, текст участвует в определении значения. Не используйте индекс как постоянный идентификатор записи.

Самостоятельная проверка

Измените подпись и порядок вариантов, сохранив value. Сравните результаты. Затем включите multiple в копии и объясните, почему прежнего чтения select.value недостаточно для всех выбранных тем.

Связанные материалы

• Консоль
• Прототип формы
• Повторные проверки