Группировка вариантов в HTML: расширение функциональности выпадающего списка

Введение

Тег <optgroup> в HTML используется для создания группы вариантов в выпадающем списке. В этом практическом занятии вы пройдете по шагам создания optgroup и настройке его с использованием атрибутов.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Настройка HTML-файла

Создайте новый файл с именем index.html. Добавьте базовую структуру HTML и включите тег <select> внутри элемента body.

<!doctype html>
<html>
  <head>
    <title>HTML Optgroup Tag Lab</title>
  </head>
  <body>
    <select>
      <!-- options will go here -->
    </select>
  </body>
</html>

Добавить варианты в выпадающий список

Добавьте теги <option> внутри тега <select>, чтобы создать список вариантов. Используйте атрибут value, чтобы задать значение для каждого варианта.

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Создать группу вариантов (optgroup)

Используйте тег <optgroup>, чтобы сгруппировать определенные варианты вместе. Добавьте атрибут label, чтобы определить имя группы.

<select>
  <optgroup label="Group 1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

Отключить группу вариантов (optgroup)

Используйте атрибут disabled, чтобы отключить целую группу вариантов в выпадающем списке. Добавьте этот атрибут к начальному тегу <optgroup>.

<select>
  <optgroup label="Group 1" disabled>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

Резюме

Тег <optgroup> используется для создания группировки вариантов в выпадающем списке. Его можно настроить с использованием атрибутов, таких как disabled и label. Следуя шагам из этого практикум, вы можете эффективно группировать и организовать варианты в HTML.