Создаем недоступные пункты в 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);
}
});
Предварительная очистка данных перед их использованием позволяет обеспечить безопасность и исключить возможность уязвимостей.
Визуализация
Приводим таблицу для наглядного представления:
Пункт | Видимость |
---|---|
Пункт 1 | 🎭 (невидим) |
Пункт 2 (🔒) | 🎭🔦 (видим) |
Пункт 3 | 🎭 (невидим) |
<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
в нашем списке получает особое значение!