Тег <option> используется в элементе <select> для определения доступных пунктов в выпадающем списке.

<select>
  <option value="value1">Вариант 1</option>
  <option value="value2">Вариант 2</option>
  <option value="value3">Вариант 3</option>
  <option value="value4">Вариант 4</option>
</select>

Атрибуты тега <option>:

  • value — указывает значение, связанное с опцией.
  • selected — указывает, что опция должна быть предварительно выбрана при загрузке страницы.
  • disabled — указывает, что опция должна быть отключена.
  • label — указание метки для опции.

Примеры использования

Простой выпадающий список:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Группировка пунктов в выпадающем списке:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Отключенный пункт списка:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" disabled>Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Заранее выбранный пункт списка:


<select>
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Множественный выбор:

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Значение выпадающего списка по умолчанию:

<select>
  <option value="" disabled selected>Select Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Ограничения

Тег <option> должен использоваться внутри элемента <select>. Если тег не используется внутри элемента <select>, браузер проигнорирует его, и он не будет отображаться на странице.