Javascript раскрывающийся список: Элемент управления javascript выпадающий список — select

Выпадающие списки · Bootstrap 4 на русском

Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью модуля выпадающих меню Bootstrap.

Обзор

Выпадающие списки — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.

Выпадающие списки построены на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js.

Если вы компилируете наши JS файлы, необходим util.js.

Доступность

Стандарт WAI ARIA

описывает и определяет виджет role="menu" как настоящий виджет, но лишь для меню приложений, запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, радио-кнопки, группы радио-кнопок и подменю.

Выпадающие списки Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие списки, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине Bootstrap не ожидает (и не добавляет автоматически) ни один из атрибутов (role и

aria-), необходимых для меню согласно стандарту ARIA.

Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.

Примеры

Оберните контролирующий элемент выпадающего элемента и выпадающее меню классом . dropdown или другим элементом с position: relative;. При необходимости выпадающие списки можно запускать из элементов

<a> или <button>.

Выпадающие списки одинарных кнопок

Любую одинарную кнопку .btn можно превратить в контролирующий элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами <button>:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

А вот так — с <a> элементами:

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выпадающая ссылка
  </a>
  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

Самое забавное, что это можно сделать с любым из вариантов кнопок: главная, вторичная, успех, инфо, предупреждение, опасность:

<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Выпадающие списки кнопок с разделенными зонами

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

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер зоны клика вблизи главной кнопки.

<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Размеры

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

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>
<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    .   ..
  </div>
</div>

Направления

Выпадающий вверх

Добавьте класс .dropup и выпадающий элемент будет выпадать вверх.

<!-- Default dropup button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>
<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

Выпадающий вправо

Добавьте класс .dropright и выпадающий элемент будет выпадать вправо.

<!-- Default dropright button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>
<!-- Split dropright button -->
<div>
  <button type="button">
    Split dropright
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropright</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

Выпадающий влево

Добавьте класс . dropleft и выпадающий элемент будет выпадать влево.

<!-- Default dropleft button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>
<!-- Split dropleft button -->
<div>
  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>Toggle Dropleft</span>
    </button>
    <div>
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button">
    Split dropleft
  </button>
</div>

Исторически содержимым выпадающих элементов всегда были ссылки, но Bootstrap изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов

<button>, а не только <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Вы также можете создать неинтерактивные выпадающие элементы класса . dropdown-item-text. Свободно стилизуйте их обычным CSS.

<div>
  <span>Dropdown item text</span>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
</div>

Активные элементы меню

Добавьте класс .active к элементу выпадающего меню для его стилизации как активированного.

<div>
  <a href="#">Regular link</a>
  <a href="#">Active link</a>
  <a href="#">Another link</a>
</div>

Неактивные элементы меню

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как деактивированного.

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.

Внимание! Выпадающие списки позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Отзывчивое выравнивание

Если вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display="static", и используйте классы адаптивных вариантов.

Чтобы выровнять выпадающее меню вправо с заданной точкой останова или больше, добавьте . dropdown-menu{-sm|-md|-lg|-xl}-right.

<div>
  <button type="button" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Чтобы выровнять выпадающее меню влево с заданной точкой останова или более, добавьте .dropdown-menu-right и .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div>
  <button type="button" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Обратите внимание, что вам не нужно добавлять атрибут data-display="static" к выпадающим кнопкам на панелях навигации, поскольку Popper. js не используется на панелях навигации.

Содержание меню

Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Разделители меню

Разделяйте группы родственных элементов меню разделителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Текст меню

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

<div>
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p>
    And this is more example text. 
  </p>
</div>

Формы меню

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

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" placeholder="[email protected]">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <div>
        <input type="checkbox">
        <label for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit">Sign in</button>
  </form>
  <div></div>
  <a href="#">New around here? Sign up</a>
  <a href="#">Forgot password?</a>
</div>

<form>
  <div>
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" placeholder="email@example. com">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" placeholder="Password">
  </div>
  <div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit">Sign in</button>
</form>

Параметры раскрывающегося списка

Используйте data-offset или data-reference, чтобы изменить местоположение раскрывающегося списка.

<div>
  <div>
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div aria-labelledby="dropdownMenuOffset">
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
    </div>
  </div>
  <div>
    <button type="button">Reference</button>
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span>Toggle Dropdown</span>
    </button>
    <div aria-labelledby="dropdownMenuReference">
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
      <div></div>
      <a href="#">Separated link</a>
    </div>
  </div>
</div>

Использование

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса . show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным дочерним элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    . ..
  </div>
</div>

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

$('.dropdown-toggle').dropdown()

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="".

Название	Тип	По умолч.	Описание
offset	number | string | function	0	Смещение раскрывающегося списка относительно его цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента. Смещение выпадающего элемента относительно его триггера. См. отступы Popper. js
flip	boolean	true	Позволяет выпадающему элементу перевернуться, если произошло перекрытие другого элемента. Больше информации: flip docs.
boundary	string | element	‘scrollParent’	Граница ограничения переполнения выпадающего меню. Принимает значения 'viewport', 'window', 'scrollParent' или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js.
reference	string | element	‘toggle’	Справочный элемент выпадающего меню. Принимает значения 'toggle', 'parent', или ссылка на HTMLElement. Для получения дополнительной информации обратитесь к Popper.js’s referenceObject docs.
display	string	dynamic | static	По умолчанию мы используем Popper. js для динамического позиционирования. Для отключения используйте static.
popperConfig	null | object	null	Чтобы изменить конфигурацию Popper.js по умолчанию в Bootstrap, смотрите Конфигурацию Popper.js.

Обратите внимание, что если для boundary установлено значение, отличное от 'scrollParent', позиция position: static применяется к контейнеру .dropdown.

Методы

Метод	Описание
$().dropdown('toggle')	Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
$().dropdown('show')	Показывает выпадающее меню данной навигационной панели или вкладки.
$().dropdown('hide')	Скрывает выпадающее меню данной навигационной панели или вкладки.
$().dropdown('update')	Обновляет позицию выпадания элемента.
$().dropdown('dispose')	Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу якоря (ссылка, т.е. <a>), запускающего функциональность toggle.

Событие	Описание
show.bs.dropdown	Это событие наступает немедленно по вызову экземпляра метода show.
shown.bs.dropdown	Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов).
hide.bs.dropdown	Это событие наступает немедленно по вызову экземпляра метода hide.
hidden.bs.dropdown	Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Создать красивый выпадающий с EasyDropDown.js

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

Чтобы стилизовать элемент, CSS должно быть достаточно. Но, ну, этого не достаточно с точки зрения доступности. Представляем EasyDropDown.js, бесплатный плагин jQuery, чтобы скрыть все эти недостатки.

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

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Установка

Чтобы установить EasyDropDown, сначала включите библиотеку jQuery на свою веб-страницу. Не забудьте также включить JavaScript (получить его Вот) вот так:

И его CSS-файл внутри тега head:

.. ..

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

Styling The Select

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

Чтобы стилизовать его, вы должны сначала включить раскрывающийся класс в теги. Метку можно добавить, указав класс метки внутри опции. Вот основная разметка:

настройкаОпция 1Вариант 2Вариант 3Вариант 4Вариант 5

Вот и все, вам не нужно добавлять какой-либо пользовательский javascript. Теперь паршивый, старомодныйпревратился в красивый, модный выпадающий ввод.

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

...
<option value="2" selected>Вариант 2</option>
...

Вы также можете отключить раскрывающийся список, используя атрибут disabled следующим образом:

…

Готовы использовать темы
EasyDropDown.js поставляется с еще 2 готовыми темами: Metro и Flat. Чтобы использовать темы, вы можете использовать атрибут данных HTML5.

Внутри tag, вызовите data-settings = ‘{«wrapperClass»: «theme-name»}’, чтобы применить другую тему. Не стесняйтесь менять название темы с помощью доступных названий тем: метро или квартира. Вот пример:

…

Помимо wrapperClass, вы можете добавить больше настроек, см. страница документации для деталей. Если вы знакомы с кодом JavaScript, вы можете посмотреть учебник там.

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

jQuery DropDownList

jqxDropDownList представляет собой виджет jQuery, содержащий список доступных для выбора элементов. отображается в раскрывающемся списке. Он работает исключительно хорошо с тысячами предметов и поддерживает навигацию с помощью клавиатуры и визуализацию элементов расширенного списка. Мы разработали и создал виджет jqxDropDownList с нуля, чтобы обеспечить визуальный вид, и богатство функций, которое требуется профессиональным разработчикам программного обеспечения. Попробуйте jqxDropDownList в нашем jsEditor — облачном решении для редактирования JavaScript, HTML и CSS, размещения и обмена идеями веб-разработки!

Особенности

• Высокая производительность
• Привязка данных
• Клавиатура навигации
• Инкрементальный поиск
• Поддержка ПК, сенсорных и мобильных устройств
• Соответствие веб-стандартам
• Богатый и простой в использовании JavaScript API
• Простая настройка и встроенные темы

Отличная производительность

Наш jQuery DropDownList предлагает интуитивно понятный и простой в использовании интерфейс. Он поддерживает полная виртуализация пользовательского интерфейса, которая сводит к минимуму количество элементов DOM, которые необходимо визуализируется и обеспечивает непревзойденную производительность в сценариях с тысячами списков предметы.

Привязка данных

jqxDropDownList имеет встроенную логику привязки данных, предназначенную для поддержки различных данных. источники и работать с большими наборами данных. Поддерживает несколько режимов привязки данных оптимизирован для распространенных сценариев:

• Локальные данные — загрузка DropDownList из локального массива объектов.
• Xml Data — загрузка DropDownList из источника данных XML с помощью AJAX.
• Данные JSON — загрузите DropDownList из источника данных JSON с помощью AJAX.
• Данные CSV — загрузка DropDownList из CSV.
• Данные вкладки — загрузка DropDownList из файлов с разделителями табуляции (TSV).
• Удаленные данные — загрузите DropDownList с помощью JSONP. JSONP (JSON с дополнением) представляет данные JSON, завернутые в вызов функции. JSONP — эффективный междоменный метод связи, часто используемый для обхода ограничений политики того же источника.

Клавиатура навигации

Вы можете использовать клавиши со стрелками на клавиатуре для перемещения по элементам DropDownList. Нажмите стрелку вниз, чтобы переместиться вниз по выбору. Нажмите стрелку вверх, чтобы переместиться вверх по выбор. Нажимайте клавиши Page Up/Down для перехода вверх или вниз на одну страницу. Когда вы нажимаете клавиши Home и End, вы можете легко перейти к первому и последнему списку элемент.

Инкрементальный поиск

Пошаговый поиск начинается, как только вы набираете первый символ строку поиска. Когда вы вводите строку поиска, jqxDropDownList автоматически выбирает найденный предмет. Когда вы наберете достаточно символов, чтобы определить место хочешь, можешь остановиться. Вы можете явно прекратить поиск, нажав «Возврат». или клавиши «Esc». Если вы ошибетесь при наборе строки поиска, вы можно отменить символы с помощью «DEL» или «Backspace». Каждый ‘DEL’ или ‘Backspace’ отменяет последний символ строки поиска. Инкрементальный Строка поиска автоматически перезапускается через определенный промежуток времени, когда вы прекращаете печатать.

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

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

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

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

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

Существует так много подходов к фильтрации. Однако для простого раскрывающегося списка, такого как мой, вам понадобится элемент . Для ссылки на данные необходимы атрибуты name и id. Теги внутри элемента select будут определять доступные параметры в раскрывающемся списке. Я также добавил класс div, чтобы упростить стилизацию css. Мой HTML-файл:

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

Чтобы заполнить выпадающий список, вы можете жестко закодировать параметры в файле HTML. Однако программное заполнение списка, вероятно, является лучшим выбором, особенно если ваш список длинный или если вы хотите иметь возможность редактировать свой список или повторно использовать свой код. Я начал с создания статического контейнера для хранения всех состояний. «Контейнер состояния» — это мой идентификатор раскрывающегося списка

:

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

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

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

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

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

Метод фильтрации

Одним из вариантов фильтрации в JS является метод фильтрации. Его можно вызвать в массиве. При вызове он создает новый отфильтрованный массив со всеми элементами, прошедшими проверку, реализованную предоставленной функцией. Узнайте больше здесь: метод фильтрации.

Показать элементы

Метод filter() возвращает новый массив со всеми элементами, прошедшими проверку, реализованную предоставленной функцией. Чтобы отобразить отфильтрованный список с помощью выбора раскрывающегося списка, вам понадобится последний шаг добавления списка в DOM.

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

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт