Создание кликабельных ссылок в опциях <select> в HTML

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

HTML **не предполагает** использования атрибута `href` внутри элемента `<option>` для реализации навигации через выпадающие списки.

**Используйте JavaScript**: для перенаправления пользователя по URL, указанному в значении выбранного `<option>`, применяйте обработчик события изменения `<select>`.

**Взгляните на пример**:

<select onchange="if (this.value) window.location.href=this.value;"> <option value="http://example.com/page1">Перейти на первую страницу</option> <option value="http://example.com/page2">Перейти на вторую страницу</option> </select>

Таким образом, перенаправление происходит на выбранную страницу.

Почему использование <option> с атрибутом href нежелательно? Семантика важна

Тег <select> предназначен для выбора опций в форме, его использование в качестве навигационного инструмента нарушает семантические правила и может ухудшить пользовательский опыт (usability), особенно у пользователей, использующих скрин-ридеры или навигирующихся с помощью клавиатуры.

Правильный инструмент: <a> внутри <li>

Чтобы не злоупотреблять функциями <select>, лучше создать навигационное меню, используя списки <ul> и <li>, внутри которых размещены ссылки <a>. Это повысит доступность и сохранит семантическую целостность.

<ul>
  <li><a href="http://example.com/page1">Перейти на первую страницу</a></li>
  <li><a href="http://example.com/page2">Перейти на вторую страницу</a></li>
</ul>

Применение <select> в сочетании с onchange

<select> может быть полезным для сортировки или фильтрации контента. В этих случаях можно использовать событие onchange для отслеживания выбора пользователя.

<select id="sortMenu">
  <option value="sort=newest">Новейшие</option>
  <option value="sort=oldest">Старейшие</option>
</select>

<script>
  document.getElementById('sortMenu').addEventListener('change', function() {
    var url = window.location.href.split('?')[0] + '?' + this.value;
    window.location.href = url;
  });
</script>

Учтение повторного выбора и тщательное управление процессом перенаправления

Стоит отметить что, onchange не срабатывает, если пользователь нажимает уже выделенный элемент списка. Эту проблему можно решить с помощью JavaScript, управляя состоянием и используя data-атрибуты.

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

Переход на другую страницу при выборе опции в HTML можно сравнить со следующим:

🚌 Автобус (`<select>`) перевозит пассажиров (`<option>`), но...
🏷️ Индивидуальные указатели пути (`href`) для каждого пассажира отсутствуют.
**Таким образом, автобус (`<select>`) решает, куда поедет дальше!**

AJAX и jQuery для улучшения навигации

Благодаря использованию AJAX можно обновлять содержимое страницы без необходимости её полной перезагрузки, что способствует улучшению пользовательского опыта (UX).

$('#sortMenu').on('change', function() {
  $.ajax({
    url: '/get-content',
    type: 'GET',
    data: { sort: this.value },
    success: function(data) {
      $('#content').html(data);
    }
  });
});

С применением jQuery можно упростить навигацию:

$('#navigationMenu').on('change', function() {
  window.location.href = this.value; // Перенаправляем пользователя по выбранному URL
});

Использование <select> для изменения отображения данных

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

Не забываем о доступности при разработке навигации

При внедрении навигационных решений крайне важно помнить о доступности. Использование стандартных ссылок (<a>) поможет обеспечить совместимость с работой скрин-ридеров и навигацию с помощью клавиатуры, учитывая разнообразие потребностей пользователей.

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

1. <option>: Элемент Option HTML – HTML: HyperText Markup Language | MDN — подробная документация MDN по элементу <option>.
2. Тег select в HTML – W3Schools — наглядная документация W3Schools по элементу <select>.
3. Стилизация элемента Select как в 2019 году | CSS-Tricks — руководство CSS-Tricks по стилизации <select> с применением чистого CSS.
4. Стандарт HTML – WHATWG — спецификация WHATWG описывающая элемент <select>.
5. <optgroup>: Элемент группы опций – HTML: HyperText Markup Language | MDN — документация MDN по применению <optgroup> для группировки элементов <option>.
6. Стандарт HTML – Формы — раздел о формах в стандарте HTML от W3C, объясняющий поведение элементов форм.