0Pricing
HTML Academy · Урок

Выпадающие меню Select и option

Создавайте выпадающие списки выбора с помощью select и option

«Выпадающие меню Select и option» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Элемент select

Элемент <select> создаёт раскрывающийся список:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

Значение варианта и отображаемый текст

Каждый элемент <option> имеет значение value (отправляемое на сервер) и отображаемый текст:

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

Атрибут предварительного выбора

Предварительно выберите вариант с помощью атрибута selected:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

Группировка вариантов по категориям

Объединяйте связанные варианты с помощью <optgroup>:

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

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

Разрешите выбирать несколько вариантов с помощью атрибута multiple:

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

Размер списка

Атрибут size управляет количеством видимых вариантов:

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

Отключённые варианты и группы

Отключайте отдельные варианты или целые группы:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

Стилизация select

Возможности стилизации нативного <select> ограничены — вот что работает:

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

Пользовательские раскрывающиеся списки и нативный select

Что следует учитывать при выборе пользовательского раскрывающегося списка:

  • Нативный select — доступен по умолчанию, удобен для мобильных устройств, работает без JavaScript
  • Пользовательский раскрывающийся список — полный контроль над стилями, но требуется полная реализация ARIA и обработка клавиатуры

В большинстве случаев выбирайте нативный <select>.

Чтение выбранного значения в JavaScript

Получайте или задавайте выбранное значение с помощью JavaScript:

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

Шаблон варианта-заполнителя

Создайте вариант-заполнитель, который нельзя выбрать:

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

Быстрая проверка

Какой элемент объединяет связанные варианты внутри раскрывающегося списка select?

Повторение: select и варианты

Основные сведения о раскрывающихся списках:

  • <select> + <option> — раскрывающийся список
  • value у варианта — данные, отправляемые на сервер
  • selected — предварительный выбор варианта
  • <optgroup label> — группировка связанных вариантов
  • multiple — возможность множественного выбора
  • size — отображение N вариантов без раскрывающегося списка

Часто задаваемые вопросы

Урок «Выпадающие меню Select и option» бесплатный?

Да — полный текст урока «Выпадающие меню Select и option» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Выпадающие меню Select и option»?

Создавайте выпадающие списки выбора с помощью select и option Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Выпадающие меню Select и option»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Выпадающие меню Select и option
  2. Textarea для многострочного ввода
  3. Группы флажков и переключателей
  4. Datalist для автодополнения
← Назад к HTML Academy