<option>

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          <form>  <label for="city-select">Ваш город</label>  <select name="city" id="city-select">    <option value="">-- Выберите город --</option>    <option value="petersburg">Санкт-Петербург</option>    <option value="moscow">Москва</option>    <option value="kazan">Казань</option>    <option value="samara">Самара</option>    <option value="perm">Пермь</option>    <option value="novosibirsk">Новосибирск</option>  </select></form>
          <form>
  <label for="city-select">Ваш город</label>
  <select name="city" id="city-select">
    <option value="">-- Выберите город --</option>
    <option value="petersburg">Санкт-Петербург</option>
    <option value="moscow">Москва</option>
    <option value="kazan">Казань</option>
    <option value="samara">Самара</option>
    <option value="perm">Пермь</option>
    <option value="novosibirsk">Новосибирск</option>
  </select>
</form>

        
        
          
        
      
Открыть демо в новой вкладке

Подробно

Секция статьи "Подробно"

Тегом <option> размечается каждый элемент выпадающего списка <select>, группы опций <optgroup> или перечня <datalist>.

Атрибуты

Секция статьи "Атрибуты"

disabled

Секция статьи "disabled"

Атрибут булевого типа. Если задан, то пункт списка нельзя выбрать. Часто браузеры выделяют такой элемент управления серым цветом, и на нём не срабатывают события клика или фокуса. Даже если атрибут не задан, элемент всё равно может быть отключён, если находится внутри тега <optgroup> с заданным атрибутом disabled.

        
          
          <select name="city1">  <option value="">-- Выберите город --</option>  <option value="petersburg">Санкт-Петербург</option>  <option value="moscow">Москва</option>  <option value="kazan">Казань</option>  <option value="samara" disabled>Самара</option>  <option value="perm">Пермь</option>  <option value="novosibirsk">Новосибирск</option></select>
          <select name="city1">
  <option value="">-- Выберите город --</option>
  <option value="petersburg">Санкт-Петербург</option>
  <option value="moscow">Москва</option>
  <option value="kazan">Казань</option>
  <option value="samara" disabled>Самара</option>
  <option value="perm">Пермь</option>
  <option value="novosibirsk">Новосибирск</option>
</select>

        
        
          
        
      

label

Секция статьи "label"

Значение этого атрибута задаёт текст пункта в списке. Если атрибут не задан, то в качестве значения берётся текстовое содержимое тега <option>.

        
          
          <select name="city2">  <option value="petersburg" selected label="Ленинград">Санкт-Петербург</option>  <option value="samara" label="Куйбышев">Самара</option>  <option value="volgograd" label="Сталинград">Волгоград</option>  <option value="ekaterinburg" label="Свердловск">Екатеринбург</option></select>
          <select name="city2">
  <option value="petersburg" selected label="Ленинград">Санкт-Петербург</option>
  <option value="samara" label="Куйбышев">Самара</option>
  <option value="volgograd" label="Сталинград">Волгоград</option>
  <option value="ekaterinburg" label="Свердловск">Екатеринбург</option>
</select>

        
        
          
        
      

В примере выше, несмотря на то, что задано текстовое содержимое тега <option>, в выпадающем списке отображаются значения из атрибутов label.

selected

Секция статьи "selected"

Атрибут булевого типа. Если он задан, это означает, что пункт списка будет выбран по умолчанию. Если у выпадающего списка <select> не задан атрибут multiple, то атрибут selected может быть задан только одному тегу <option> в пределах этого списка. Если тегу <select> задан атрибут multiple, то атрибут selected может быть задан любому количеству тегов <option> в пределах списка.

        
          
          <select name="city3">  <option value="">-- Выберите город --</option>  <option value="petersburg">Санкт-Петербург</option>  <option value="moscow">Москва</option>  <option value="kazan" selected>Казань</option>  <option value="samara">Самара</option>  <option value="perm">Пермь</option>  <option value="novosibirsk">Новосибирск</option></select>
          <select name="city3">
  <option value="">-- Выберите город --</option>
  <option value="petersburg">Санкт-Петербург</option>
  <option value="moscow">Москва</option>
  <option value="kazan" selected>Казань</option>
  <option value="samara">Самара</option>
  <option value="perm">Пермь</option>
  <option value="novosibirsk">Новосибирск</option>
</select>

        
        
          
        
      
        
          
          <select name="city4" multiple size="6">  <option value="petersburg">Санкт-Петербург</option>  <option value="moscow" selected>Москва</option>  <option value="kazan" >Казань</option>  <option value="samara" selected>Самара</option>  <option value="perm">Пермь</option>  <option value="novosibirsk">Новосибирск</option></select>
          <select name="city4" multiple size="6">
  <option value="petersburg">Санкт-Петербург</option>
  <option value="moscow" selected>Москва</option>
  <option value="kazan" >Казань</option>
  <option value="samara" selected>Самара</option>
  <option value="perm">Пермь</option>
  <option value="novosibirsk">Новосибирск</option>
</select>

        
        
          
        
      
Открыть демо в новой вкладке

value

Секция статьи "value"

Если выбран какой-то пункт списка, то при отправке формы на сервер будет передано значение атрибута value этого пункта. Если атрибут не задан, то при отправке будет использоваться текстовое содержимое тега <option>.

На практике

Секция статьи "На практике"

Денис Ежков

Секция статьи "Денис Ежков"

🛠 К сожалению браузер не предоставляет никаких средств для нормальной стилизации элемента <option>, и это доставляет очень много головной боли фронтенд-разработчикам :( Стиль элементов <option> можно поменять, только если тегу <select> задан атрибут multiple. Тогда список целиком становится частью потока страницы, и мы имеем возможность применять стили к его элементам:

        
          
          <select name="city" id="city-select" multiple>  <option value="petersburg">Санкт-Петербург</option>  <option value="moscow">Москва</option>  <option value="kazan">Казань</option>  <option value="samara">Самара</option>  <option value="perm">Пермь</option>  <option value="novosibirsk">Новосибирск</option></select>
          <select name="city" id="city-select" multiple>
  <option value="petersburg">Санкт-Петербург</option>
  <option value="moscow">Москва</option>
  <option value="kazan">Казань</option>
  <option value="samara">Самара</option>
  <option value="perm">Пермь</option>
  <option value="novosibirsk">Новосибирск</option>
</select>

        
        
          
        
      
        
          
          select {  counter-reset: cnt;}option:nth-child(2n) {  background-color: #282a2e;}option {  counter-increment: cnt;}option::before {  content: counter(cnt) ". ";}
          select {
  counter-reset: cnt;
}

option:nth-child(2n) {
  background-color: #282a2e;
}

option {
  counter-increment: cnt;
}

option::before {
  content: counter(cnt) ". ";
}

        
        
          
        
      
Открыть демо в новой вкладке