Выпадающий список html: Атрибут multiple | htmlbook.ru — Вебджем.рф

Содержание

Как сделать выпадающий список в HTML

Простейший выпадающий список в HTML легко создать, используя тег select. Это тег-контейнер, в него вкладываются теги option – именно они задают элементы списка.

Есть несколько вариантов списков, которые можно сделать с помощью тега select: раскрывающийся список (варианты выпадают после клика на основном поле или наведения на него курсора) и список множественного выбора – в нем пользователь может выбрать несколько пунктов. Первые более распространены, они являются значимым элементом навигации современных сайтов. Выпадающий список множественного выбора можно применить, например, в каталогах, где нужно выбрать несколько характеристик товара.

Изменять внешний вид и свойства списков можно с помощью универсальных и специальных атрибутов.

Атрибуты тега select

1. Multiple – задает множественный выбор.

2. Size – задает количество видимых строк в списке, то есть высоту. И тут все зависит от того, присутствует атрибут multiple или нет. Если да, и вы не указываете size, то при наличии multiple пользователь увидит все возможные варианты выбора, если же multiple отсутствует, то показана будет всего одна строчка, а остальные посетитель сможет прочитать, когда нажмет на значок лифта с правой стороны. Если же высота size задана и она меньше количества вариантов, то справа появится полоса прокрутки.

3. Name – имя. Выпадающий список может обойтись и без него, но оно может быть необходимым для взаимодействия с программой-обработчиком на сервере. Как правило, имя все-таки указывают.

Тег select не имеет обязательных атрибутов в отличие от тега option.

Атрибуты вложенного тега option

Selected – предназначен для выделения пункта списка. Пользователь сможет выделять более одного пункта, если задан атрибут multiple (см. выше).
Value – значение. Этот атрибут обязателен. Веб-сервер должен понимать, какие именно пункты списка выбрал пользователь.
Label. С помощью этого атрибута можно сокращать слишком длинные элементы списков. Например, на экран будет выводиться «Милан», вместо указанного в теге option «Милан — административный центр Ломбардии. Северная Италия». Этот атрибут также используется для группировки пунктов в списке.

Что касается ширины списка, то она устанавливается по умолчанию по длине самого широкого текста в списке. Разумеется, ширину можно менять при помощи стилей HTML.

Выпадающий список другими способами

Его можно сделать при помощи CSS, например, список будет появляться при наведении курсора на элемент страницы. Отличные возможности для создания списков предоставляет JavaScript , работу которого упрощает библиотека Jquery. Выпадающий список, подключенный с помощью этой библиотеки, может быть очень сложным, например, каскадным. То есть при выборе элемента в одном списке появляется следующий список, например, существует пункт меню «Женская одежда» (при наведении выпадают виды одежды), затем при выборе одного из видов, например, «Верхняя одежда», выпадает список с элементами: куртки, парки, пальто, полупальто, шубы и т. п.

Мы поверхностно перечислили основные способы, при помощи которых можно создать выпадающий список. Разумеется, есть масса нюансов в HTML, в CSS и в JavaScript, которые позволяют менять функциональность и внешний вид списков.

Выпадающий список | Документация AnyLogic

Свойства
Функции

Работа с фигурами и элементамиСправочник классов — ShapeComboBox

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

Вы можете также связать этот элемент управления с переменной или параметром типа String, double или int. При этом выбор того или иного значения в списке будет присваивать выбранное значение связанной со списком переменной/параметру.

Если вы сделаете выпадающий список редактируемым, то пользователь сможет добавлять новые значения в список в дополнение к уже имеющимся, вводя их имена прямо в поле элемента управления.

Если вы хотите предоставить пользователю возможность одновременного выбора сразу нескольких опций, используйте другой элемент управления — список.

Чтобы понять принцип работы с выпадающим списком, вы можете изучить приведенный ниже пример модели. При выборе того или иного значения в списке будут выполняться определенные строки кода, меняющие скорость выполнения модели (код находится в секции свойств Действие выпадающего списка). Демонстрационная модель: Combo Box Controls Simulation Speed

Чтобы добавить выпадающий список

Перетащите элемент Выпадающий список из палитры Элементы управления в то место графического редактора, где вы хотите его нарисовать.
Перейдите в панель Свойства.
Если вы хотите связать выпадающий список с переменной или параметром (то есть, присваивать этой переменной имя выбранного в текущий момент элемента списка), установите флажок
Связать с и введите имя соответствующей переменной или параметра в расположенном справа поле.
Если же вы хотите, чтобы при выборе пользователем в списке другого значения производилось какое-то другое, более сложное действие, введите код, который вы хотели бы выполнять в таком случае, в секции Действие (имя выбранного в данный момент времени элемента доступно здесь как value (локальная переменная типа String)).

Свойства

Основные

Имя — Имя выпадающего списка. Имя используется для идентификации элемента и доступа к нему из кода.

Исключить — Если опция выбрана, то выпадающий список будет исключен из модели.

Отображается на верхнем агенте — Если опция выбрана, то выпадающий список будет виден на презентации типа агента, в который будет вложен данный агент.

Редактируемый — Если опция выбрана, то во время выполнения модели пользователь сможет добавлять новые значения в список в дополнение к уже имеющимся.

Элементы — Здесь вы задаете элементы, которые появятся в выпадающем списке. В строках таблицы задаются имена элементов. Чтобы удалить запись из таблицы, выберите соответствующую строку и щелкните по кнопке . Поскольку порядок отображения записей важен, вы можете изменять его с помощью кнопок и , расположенных под таблицей.

Связать с — Если вы хотите связать список с переменной или параметром типа String (то есть, присваивать этой переменной имя выбранного в текущий момент элемента списка), установите этот флажок и введите имя соответствующей переменной или параметра в расположенном справа поле.

Значение по умолчанию — [Видно, если не установлен флажок

Связать с] Выражение, возвращающее значение типа String — имя элемента, который будет выбран в выпадающем списке по умолчанию. Например, вы задали Элементы Первый Вариант и Второй Вариант. Чтобы сделать Второй Вариант выбранным по умолчанию, напишите здесь его имя в кавычках: «Второй Вариант»

Доступность — Логическое выражение, определяющее, доступен ли элемент управления или нет.

Действие

Код, который будет выполняться при смене элемента, выбранного в выпадающем списке. Имя выбранного в данный момент времени элемента доступно здесь как value (локальная переменная типа String).

Внешний вид

Цвет фона — Задает цвет фона выпадающего списка. Щелкните мышью внутри элемента управления и выберите нужный цвет из списка наиболее часто используемых цветов или же выберите любой другой цвет с помощью диалога Цвета. Цвет фона корректно отображается в операционной системе Windows с классическим оформлением. В то же время некоторые операционные системы не поддерживают такие элементы управления с измененным пользователем цветом фона.

Цвет текста — Задает цвет текста, отображаемого в выпадающем списке. Щелкните мышью внутри элемента управления и выберите нужный цвет из списка наиболее часто используемых цветов или же выберите любой другой цвет с помощью диалога Цвета.

Шрифт — Задает тип шрифта текста, отображаемого в выпадающем списке. В расположенном справа поле вы можете выбрать размер шрифта.

Курсив — Если опция выбрана, то текст будет выделен курсивом.

Полужирный — Если опция выбрана, то текст будет выделен полужирным шрифтом.

Местоположение и размер

Уровень — Уровень, на котором расположен этот элемент.

X — X-координата верхнего левого угла выпадающего списка.

Y — Y-координата верхнего левого угла выпадающего списка.

Ширина — Ширина выпадающего списка (в пикселах).

Высота — Высота выпадающего списка (в пикселах).

Специфические

Видимость — Элемент будет виден, если заданное здесь выражение будет истинно (true), в противном случае он отображаться не будет.

Количество — Количество экземпляров данного элемента управления. Если вы оставите это поле пустым, то будет создан только один такой элемент управления.

Отображать имя — Если опция выбрана, то имя элемента будет отображаться в графическом редакторе.

Значок — Если опция выбрана, то выпадающий список будет считаться частью значка типа агентов.

Функции

Получение выбранного значения

Функция	Описание
String getValue()	Возвращает выбранную в данный момент строку.
int getIntValue()	Возвращает текущее значение типа int выпадающего списка. Если текущее значение не является числом, то функция выдает ошибку.
double getDoubleValue()	Возвращает текущее значение типа double выпадающего списка. Если текущее значение не является числом, то функция выдает ошибку.
int getValueIndex()	Возвращает индекс выбранной в данный момент строки или -1, если это редактируемый выпадающий список, не содержащий введенного значения.

Задание нового выбранного значения

Функция	Описание
void setValue(double value)	Задает новое численное значение (если выпадающий список связан с параметром/переменной типа int или double). При этом заданное пользователем действие не выполняется. value — новое значение (типа double или int)
void setValue(double value, boolean callAction)	Задает новое численное значение (если выпадающий список связан с параметром/переменной типа int или double). При этом если значение аргумента функции callAction равно true, то выполнится заданное пользователем действие. value — новое значение (типа double или int) callAction — если true, то будет выполнено заданное пользователем действие
void setValue(String text)	Задает выделенную строку выпадающего списка. При этом заданное пользователем действие не выполняется. text — новая выбранная строка
void setValue(String text, boolean callAction)	Задает выделенную строку выпадающего списка. При этом если значение аргумента функции callAction равно true, то выполнится заданное пользователем действие. Если значение принадлежит к численному типу, а данный текст не представляет собой число, ничего не изменится. text — новая выбранная строка callAction — если true, то будет выполнено заданное пользователем действие
void setValueIndex(int valueIndex)	Выбирает строку с заданным индексом. При этом заданное пользователем действие не выполняется. valueIndex — индекс строки
void setValueIndex(int valueIndex, boolean callAction)	Выбирает строку с заданным индексом. При этом если значение аргумента функции callAction равно true, то выполнится заданное пользователем действие. valueIndex — индекс строки callAction — если true, то будет выполнено заданное пользователем действие
void setValueToDefault()	Устанавливает заданный по умолчанию текст в качестве текущего значения выпадающего списка. При этом заданное пользователем действие не выполняется.

Управление доступом

Функция	Описание
boolean isEnabled()	Проверяет, доступен ли элемент управления в текущий момент времени. Возвращает true, если элемент доступен (и вы можете менять его состояние), либо же false, если элемент недоступен.
void setEnabled(boolean yes)	Делает элемент управления активным или недоступным (в зависимости от значения аргумента функции). yes — если true, то элемент управления будет активен; если false — то недоступен.

Программное выполнение заданного действия

Функция	Описание
void action()	Выполняет действие, заданное пользователем для этого элемента управления (в его свойстве Действие).

Доступ к строкам выпадающего списка

Функция	Описание
String[] getItems()	Возвращает массив из строк, используемых в данный момент в выпадающем списке. Возвращаемый массив не должен изменяться пользователем.

Добавление новых строк в выпадающий список

Функция	Описание
void setItems(String[] items)	Задает новые строки для данного выпадающего списка. Эта функция сохраняет текущее значение выпадающего списка: если он может быть отредактирован если он не может быть отредактирован, но текущее значение хранится в новых строках При этом действие, заданное пользователем, не выполняется (даже если текущее выделение поменяется). Если данный выпадающий список имеет численное значение (типы double или int), а некоторые строки не могут быть распознаны как числа, функция выдает ошибку. items — массив из строк для помещения в выпадающий список
void setItems(String[] items, boolean callAction)	Задает новые строки для данного выпадающего списка. Эта функция сохраняет текущее значение выпадающего списка: если он может быть отредактирован если он не может быть отредактирован, но текущее значение хранится в новых строках items — массив из строк для помещения в выпадающий список callAction — если true и выбор изменяется, то действие, заданное пользователем, будет выполнено

Функция

Описание

void setItems(String[] items)

Задает новые строки для данного выпадающего списка. Эта функция сохраняет текущее значение выпадающего списка:

если он может быть отредактирован
если он не может быть отредактирован, но текущее значение хранится в новых строках

При этом действие, заданное пользователем, не выполняется (даже если текущее выделение поменяется). Если данный выпадающий список имеет численное значение (типы double или int), а некоторые строки не могут быть распознаны как числа, функция выдает ошибку.

items — массив из строк для помещения в выпадающий список

void setItems(String[] items, boolean callAction)

Задает новые строки для данного выпадающего списка.

Эта функция сохраняет текущее значение выпадающего списка:

если он может быть отредактирован
если он не может быть отредактирован, но текущее значение хранится в новых строках

items — массив из строк для помещения в выпадающий список
callAction — если true и выбор изменяется, то действие, заданное пользователем, будет выполнено

Местоположение

Функция	Описание
double getX()	Возвращает координату X элемента управления (если точнее, то координату X его верхнего левого угла).
double getY()	Возвращает координату Y элемента управления (если точнее, то координату Y его верхнего левого угла).
void setX(double x)	Задает новую координату X выпадающего списка. x — новое значение координаты X
void setY(double y)	Задает новую координату Y выпадающего списка. y — новое значение координаты Y
void setPos(double x, double y)	Задает новое местоположение элемента управления. x — новое значение координаты X y — новое значение координаты Y

Видимость

Функция	Описание
boolean isVisible()	Возвращает видимость элемента управления. Если возвращает true, то элемент управления виден; если false — то нет.
void setVisible(boolean v)	Задает видимость элемента управления. v — видимость: если true, то элемент управления будет виден, если false — то нет.

Группа

Функция	Описание
ShapeGroup getGroup()	Возвращает группу, содержащую этот элемент управления.

Уровень

Функция	Описание
Level getLevel()	Возвращает уровень, на котором находится этот элемент управления.

Как мы можем улучшить эту статью?

Список США для HTML-тега select/option (раскрывающийся список)

Элвин Александр. Последнее обновление: 11 октября 2021 г.

Я никак не могу найти список штатов (в США) для HTML-списка выбора/параметров (также известного как поле со списком, раскрывающийся список), когда он мне нужен, поэтому я привожу здесь две версии.

Версия 1: выбор/опция HTML, список США, только сокращения

В первом списке выбора/опций отображается список штатов, но показаны только сокращения штатов:

<выбрать имя="состояние" размер="1">

Версия 2: список США, полное название каждого штата

Второй список выбора/параметров HTML показывает пользователю полное название каждого штата, но использует уникальный код сокращения штата за кулисами:

<выбрать имя="состояние" размер="1">

Таким образом, если вам нужен список Соединенных Штатов в раскрывающемся списке HTML в формате SELECT/OPTION, я надеюсь, что это будет полезно.

programming

combo box

combo-box

combobox

drop down list

drop-down list

form

html

list

option

select

state

states

united заявляет

Версия раскрывающегося списка данных США на основе базы данных
Пример раскрывающегося списка состояний формы Drupal (список состояний)
Поле формы Drupal CCK — список штатов США
Создание выпадающего списка в Play Framework 2.6
Пример поля выбора/параметров формы Drupal (раскрывающийся список)

Я написал

книг

Функциональное программирование, упрощенное: обновлено для Scala 3!
Книга-бестселлер №1 по функциональному программированию, декабрь 2022 г.
Написание книги в LaTeX
Для разработчиков ООП: Самая маленькая и простая книга по функциональному программированию
Две замечательные цитаты о данных, моделировании предметной области, программировании и дизайне

Фильтрация в JavaScript с использованием выпадающего списка HTML | by Sarah Chavez

Я новичок в JavaScript (JS) и недавно начал проект с использованием JS в первый раз. Почти полный запрет на аборты в Техасе вдохновил меня на создание поисковика клиник для абортов с вариантами клиник, которые можно фильтровать по штатам.

Сложный аспект моего проекта заключался в создании инструмента для фильтрации клиник по штатам с использованием раскрывающегося списка HTML и метода фильтрации JS. Я решил задокументировать свои шаги по воссозданию такого фильтра.

Фото предоставлено: https:www.maxpixel.net/photo-4828418

Добавление выпадающего списка в файл HTML

Существует так много подходов к фильтрации. Однако для простого раскрывающегося списка, такого как мой, вам понадобится элемент :

Затем я создал функцию для установки параметров состояния в качестве переменных. Это облегчит заполнение выпадающего списка. Я создал переменную с именем option и использовал конструктор класса состояния, чтобы создать параметры для раскрывающегося списка.

Затем я создал функцию, которая добавляет параметры в раскрывающийся список.

Добавить прослушиватель событий

Для обработки части фильтрации мне потребуется некоторая логика, чтобы определить, когда параметр раскрывающегося списка изменяется. Мне также понадобится некоторая логика для фильтрации всех клиник по выбранному штату. Я справился с этим, добавив прослушиватель событий JS, поэтому, когда пользователь фиксирует изменение значения элемента из раскрывающегося списка, событие запускается для элемента

Имя *

Email *

Сайт

Выпадающий список html: Атрибут multiple | htmlbook.ru