Тег select
Тег select создает выпадающий список
для использования в HTML формах.
Отдельный пункт списка должен храниться в
теге option.
Атрибуты
| Атрибут | Описание |
|---|---|
multiple |
Наличие данного атрибута создает мультиселект -
выпадающий список, в котором можно выбрать несколько пунктов, зажав
клавишу Ctrl или выделив их мышкой.
Необязательный атрибут. |
name |
Имя выпадающего списка. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают - в PHP придут данные того поля ввода, которое ниже в HTML коде. |
Пример
Давайте посмотрим, как работает выпадающий список:
<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Пример
Давайте ширину выпадающего списка сделаем
равной ширине самого большого элемента (если
она не будет явно указана с помощью CSS свойства
width):
<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Пример . Выбор по умолчанию
А теперь давайте попробуем выбрать город
по умолчанию. Сделаем это с помощью атрибута
selected:
<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Пример . Мультиселект
Давайте теперь превратим обычный селект в
мультиселект с помощью атрибута multiple:
<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Обратите внимание на то, что имя селекта, заданное в атрибуте name,
должно быть с квадратными скобками в конце. Это нужно для того, чтобы в PHP
приходили все выбранные значения (иначе придет только одно - последнее).
Пример . Несколько значений по умолчанию в мультиселекте
А теперь, в мультиселекте по умолчанию, попробуем выбрать более, чем одно значение:
<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
:
