Создаем недоступные пункты в HTML-меню: приемы и советы

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

Для указания неактивного и скрытого по умолчанию элемента в списке выбора (select), следует использовать атрибуты disabled, selected и hidden вот таким образом:

<select>
  <option value="" disabled selected hidden>Выберите пункт</option>
  <option value="1">Пункт 1</option>
  <option value="2">Пункт 2</option>
</select>

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

Завершение

При необходимости заполнения списка данными, частым решением является использование AJAX-запросов для извлечения информации, например, из базы данных MySQL. После чего с помощью jQuery или JavaScript осуществляется добавление полученных данных в select. Пример кода ниже демонстрирует данный процесс:

$.ajax({
  url: 'path/to/server/script',
  type: 'GET', // Вы также можете использовать 'POST', это уже вопрос предпочтений
  dataType: 'json', // Допустимы и другие форматы данных
  success: function(data) {
    var select = $('select#mySelect');
    data.forEach(function(item) {
      select.append($('<option>', {
        value: item.id,
        text: item.name
      }));
    });
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Ошибка! Что-то пошло не так: ' + textStatus, errorThrown);
  }
});

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

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

Приводим таблицу для наглядного представления:

<select>
  <option value="1">Пункт 1</option>
  <option value="2" disabled selected>Пункт 2</option>
  <option value="3">Пункт 3</option>
</select>

Визуализируйте заблокированный Пункт 2 как недостижимую звезду: вы можете его видеть, но не можете выбрать.

Группировка и скрытые опции

Использование групп предполагает использование тега <optgroup>, что помогает продемонстрировать связь между элементами и дает возможность отключать целые группы:

<select>
  <optgroup label="Доступные пункты">
    <option value="1">Пункт 1</option>
    <option value="2">Пункт 2</option>
  </optgroup>
  <optgroup label="Недоступные пункты" disabled>
    <option value="3">Пункт 3</option>
    <option value="4">Пункт 4</option>
  </optgroup>
</select>

Атрибут default позволяет указать опции, которые должны быть выбраны по умолчанию. Так, например, Пункт 2 в нашем списке получает особое значение!

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

1. <option>: Тег Option в HTML – MDN
2. Атрибут disabled в элементе select – w3schools
3. Современные способы стилизации элемента select – CSS-Tricks
4. Стандарт HTML
5. Редактор кода W3Schools
6. Can I use...? Таблицы поддержки для HTML5, CSS3 и др.
7. WebAIM: Создание доступных форм – элементы управления