HTML5 | Список select
Последнее обновление: 08.04.2016
Элемент select создает список. В зависимости от настроек это может быть выпадающий список для выбора одного элемента, либо раскрытый список, в котором можно выбрать сразу несколько элементов.
Создадим выпадающий список:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Элемент select в HTML5</title> </head> <body> <form method="get"> <p> <label for="phone">Выберите модель:</label> <select name="phone"> <option value="iphone 6s">iPhone 6S</option> <option value="lumia 950">Lumia 950</option> <option value="nexus 5x">Nexus 5X</option> <option value="galaxy s7">Galaxy S7</option> </select> </p> <p> <input type="submit" value="Отправить" /> </p> </form> </body> </html>
Внутрь элемента select помещаются элементы option — элементы списка.
Каждый элемент option содержит атрибут
value, который хранит значение элемента. При этом значение элемента option не обязательно должно совпадать с отображаемым им текстом. Например:
<option value="apple">iPhone 6S</option>
С помощью атрибута selected мы можем установить выбранный по умолчанию элемент — это необязательно должен быть первый элемент в списке:
<select name="phone"> <option value="iphone 6s">iPhone 6S</option> <option value="lumia 950">Lumia 950</option> <option value="nexus 5x" selected>Nexus 5X</option> </select>
С помощью другого атрибута disabled можно запретить выбор определенного элемента. Как правило, элементы с этим атрибутом служат для создания заголовков:
<select name="phone"> <option disabled selected>Выберите модель</option> <option value="iphone 6s">iPhone 6S</option> <option value="lumia 950">Lumia 950</option> <option value="nexus 5x" selected>Nexus 5X</option> </select>
Для создания списка с множественным выбором к элементу select надо добавить атрибут multiple:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Элемент select в HTML5</title> </head> <body> <form method="get"> <p> <label for="phone">Выберите модель:</label> <br/> <select multiple name="phone"> <option value="iphone 6s">iPhone 6S</option> <option value="lumia 950">Lumia 950</option> <option value="nexus 5x">Nexus 5X</option> <option value="galaxy s7">Galaxy S7</option> </select> </p> <p> <input type="submit" value="Отправить" /> </p> </form> </body> </html>
Зажав клавишу Ctrl, мы можем выбрать в таком списке несколько элементов:
Select также позволяет группировать элементы с помощью тега <optgroup>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Элемент select в HTML5</title> </head> <body> <form method="get"> <p> <label for="phone">Выберите модель:</label> <select name="phone"> <optgroup label="Apple"> <option value="iphone 6s">iPhone 6S</option> <option value="iphone 6s plus">iPhone 6S Plus</option> <option value="iphone 5se">iPhone 5SE</option> </optgroup> <optgroup label="Microsoft"> <option value="lumia 950">Lumia 950</option> <option value="lumia 950 xl">Lumia 950 XL</option> <option value="lumia 650">Lumia 650</option> </optgroup> </select> </p> <p> <input type="submit" value="Отправить" /> </p> </form> </body> </html>
Использование групп элементов применимо как к выпадающему списку, так и к списку со множественным выбором.
НазадСодержаниеВперед
Тег — раскрывающийся список
Поддержка браузерами
Описание
HTML тег <select>
Элемент <select> может содержать два и более тегов <option>, определяющих доступные варианты выбора в раскрывающемся списке. Текст первого дочернего элемента <option> будет изначально отображаться в выпадающем списке, то есть будет являться значением по умолчанию для списка. Изменить или задать значение по умолчанию для <select> можно прописав атрибут selected к нужному варианту:
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="vw">VW</option> <option selected="" value="audi">Audi</option> </select>
Ширина раскрывающегося списка будет определяться самым длинным текстом, указанным в теге <option>.
Атрибуты
- autofocus:
- Указывает, что элемент должен автоматически получить фокус при загрузке веб-страницы. Возможные значения логического атрибута
autofocus:<select autofocus> <select autofocus="autofocus"> <select autofocus="">
Пример »Примечание: атрибут
autofocusне поддерживается в IE9 и более ранних версиях, и в Firefox. - disabled:
- Указывает, что элемент неактивен, то есть пользователь не сможет взаимодействовать с элементом. Возможные значения логического атрибута
disabled:<select disabled> <select disabled="disabled"> <select disabled="">
- form:
- Определяет форму с которой связан элемент. В качестве значения атрибута выступает идентификатор элемента <form>.
Этот атрибут позволяет размещать элемент <select>в произвольном месте документа, а не только в качестве потомка элемента<form>.Примечание: атрибут
formне поддерживается в Firefox. - multiple:
- Указывает, что за один раз можно выбрать несколько вариантов. Выбор нескольких вариантов различается в зависимости от операционной системы:
- Windows: удерживайте нажатой клавишу
CTRLдля выбора нескольких вариантов. - Mac: удерживайте нажатой клавишу
CMDдля выбора нескольких вариантов.
multiple:<select multiple> <select multiple="multiple"> <select multiple="">
Пример »Примечание: из-за различных способов выбора нескольких элементов и дополнительного уведомления пользователей о доступности выбора нескольких вариантов, рекомендуется вместо раскрывающегося списка использовать флажки.
- Windows: удерживайте нажатой клавишу
- name:
- Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.
- size:
- Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута
sizeбольше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра. Пример »
Этот атрибут позволяет размещать элемент 
Тег <select> так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
Нет.
Пример
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
Результат данного примера в окне браузера:
Создать DropDownList с помощью HtmlHelper в ASP.
Net MVC Узнайте, как создать элемент управления HTML раскрывающегося списка с помощью HtmlHelper в представлении Razor.
Класс HtmlHelper включает два метода расширения для создания элемента управления в представлении бритвы: DropDownListFor() и DropDownList() .
Мы будем использовать следующие модели класса Student и Пол перечисл.
публичный класс Студент
{
общественный интервал StudentId { получить; установлен; }
общедоступная строка StudentName { получить; установлен; }
общественный пол StudentGender { получить; установлен; }
}
общественное перечисление Пол
{
Мужской,
женский
}
Html.DropDownListFor()
Метод расширения Html.DropDownListFor является строго типизированным методом расширения, который генерирует элемент для свойства, указанного с помощью лямбда-выражения.
Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода DropDownListFor.
В следующем примере создается раскрывающийся список для указанного выше свойства StudentGender .
@использование MyMVCApp.Models @модель Студент @Html.DropDownListFor(m =>m.StudentGender, новый SelectList(Enum.GetValues(typeof(Gender))), "Выберите пол")
<выберите имя = "Пол учащихся">
В приведенном выше примере первый параметр в методе DropDownListFor() — это лямбда-выражение, указывающее свойство модели, которое необходимо привязать к элементу select.
Мы указали свойство StudentGender . Второй параметр указывает элементы для отображения в раскрывающемся списке с помощью Объект SelectList . Третий параметр является необязательным, он будет первым элементом выпадающего списка.
Итак, теперь он генерирует элемент управления с двумя элементами списка — Male и Female, как показано ниже.
Html.DropDownList()
Метод Html.DropDownList() генерирует элемент с указанным именем, элементами списка и атрибутами html.
Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода DropDownList().
@использование MyMVCApp.Models
@модель Студент
@Html.DropDownList("ПолСтудента",
новый SelectList(Enum.GetValues(typeof(Gender))),
"Выберите пол",
новый { @class = "управление формой" })
<выберите имя = "Пол учащихся">
В приведенном выше примере первый параметр — это имя свойства, для которого мы хотим отобразить элементы списка.
Второй параметр — это список значений, которые должны быть включены в раскрывающийся список. Мы использовали методы Enum для получения значений Gender .
Третий параметр — это метка, которая будет первым элементом списка, а четвертый параметр — атрибуты HTML, такие как CSS, которые будут применяться к раскрывающемуся списку.
Хотите проверить, насколько хорошо вы знаете ASP.NET MVC?
Запустить тест ASP.NET MVC
Раскрывающееся меню или список для множественного выбора
Выпадающий список — один из самых гибких объектов в HTML. Это похоже на радиокнопку, т. е. только один элемент может быть выбран из группы элементов, но единственное отличие состоит в том, что выпадающее меню занимает меньше места в поле по сравнению с радиокнопкой, и люди могут просматривать один элемент за раз.Добавив атрибут несколько , пользователь может выбрать несколько вариантов.
youtube.com/embed/Dm8JquJoB_I» title=»HTML form drop down list box to give single or multiple options to user with attributes and examples» frameborder=»0″ allow=»accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture» allowfullscreen=»»> Выпадающий список можно создать следующим образом:<выберите имя="цвета">
Связанное руководство Списокбокс в JavaScript Двойной список в Javascript Список в JQuery
Атрибуты выпадающего списка:
| Атрибут | Описание |
|---|---|
| автофокус | Элемент находится в фокусе (по умолчанию) при загрузке страницы. |
| отключено | Элемент находится в отключенном состоянии для пользователя. |
| Имя | Этот атрибут определяет имя объекта, через которое на него можно сослаться. |
| size | Interger : Используется для указания количества видимых элементов в списке. |
| Несколько | Если да, то можно сделать несколько вариантов. |
Атрибуты
| Атрибут | Описание |
|---|---|
| значение | Используется для указания значения, которое должно быть отправлено, если форма была отправлена. |
| выбрано | Выбор опции по умолчанию |
Пример:
Любимый цвет: <ВЫБЕРИТЕ имя="ddl">Вот результат:
Любимый цвет: BlueGreenRedYelllowВыберите цвет Белый
В коде посмотрите, как мы сохранили пустое значение для тега Выберите цвет.
Теперь давайте попробуем один раскрывающийся список с множественным выбором.
Управление шириной поля выбора
Если мы динамически меняем элементы поля выбора, то ширина раскрывающегося поля выбора будет продолжать меняться. Он будет растягиваться или уменьшаться в зависимости от элементов поля выбора. Это будет выглядеть некрасиво, поэтому, чтобы задать фиксированную ширину, мы должны использовать таблицу стилей. Просто добавив атрибут ширины, мы не можем добиться результата в Internet Explorer и в других браузерах, кроме Netscape. Вот код для управления шириной поля выбора.<выбрать имя="ddl" ширина=300>Множественный выбор из раскрывающегося списка
Мы можем дать пользователям возможность выбрать более одного варианта, добавив атрибут 9.
0075 кратное . Мы также можем указать размер , чтобы отобразить количество параметров, не разворачивая раскрывающийся список. Вот пример списка с несколькими вариантами.BlueGreenRedYelllowSelect a Color White
Нажмите и удерживайте Ctrl Клавиша и выберите несколько элементов из списка.
Вот код выше.
<выбрать имя="ddl" размер=4 несколько>Мы можем сгруппировать варианты под разными заголовками. Мы можем использовать optgroup для управления такой группой опций.
OPTGROUP для группировки параметров Listbox →
несколько вариантов выбора списка обрабатываются с использованием PHP
Управление списком с помощью JQuery
←Форма HTML ←Текстовое поле в форме Чекбокс в форме →
Эта статья написана командой plus2net.
com .
plus2net.com
- Текстовое поле для ввода любого (короткого) текста, обычно длиной до 100 символов
- Скрытое поле для передачи данных, невидимых пользователю
- Поле пароля Аналогично текстовому полю, но введенная дата не маскируется и не отображается как **
- TextArea Ввод большого количества текста
- RadioButton Выбор одного варианта из многих
- Флажок Выбор одного или нескольких вариантов из множества
- Кнопка Для запуска событий или действий, созданных пользователем
- Кнопка изображения Используется для щелчка действий для выполнения некоторого сценария события
- Кнопка отправки Кнопка для всех введенных пользователем данных формы
- Две кнопки отправки Отправка одних и тех же данных формы в две разные формы
- Отправить новое окно Отправка данных формы в новое окно
- Кнопка сброса Кнопка для сброса данных формы
- Раскрывающееся меню Выбор одного параметра из списка параметров, доступных в списке или раскрывающемся меню
- Список данных Варианты для выбора с функцией автозаполнения
- Кнопка «Назад» Возврат на предыдущую страницу нажатием кнопки
- Загрузка файлов Загрузка файлов на сервер с помощью HTML-формы
- Установить фокус Удержание курсора в поле ввода во время загрузки страницы
| sultan | 30-09-2014 |
я хочу выбрать несколько значений из выпадающего списка без использования jquery или javascript, а также без нажатия клавиши ‘ctrl’ или ‘shift’. | |