Документация по jQuery DropDownList — Обзор DropDownList
DropDownList отображает список значений, позволяющий выбрать один элемент из списка, и поддерживает ключевые функции, такие как фильтрация, шаблоны элементов, виртуализация и каскадирование.
Пользовательский ввод ограничен предопределенными параметрами. Чтобы применить ввод с клавиатуры, используйте Kendo UI ComboBox.
DropDownList является частью пользовательского интерфейса Kendo для jQuery, библиотека пользовательского интерфейса профессионального уровня с более чем 110 компонентами для создания современных многофункциональных приложений. Чтобы попробовать его, подпишитесь на бесплатную 30-дневную пробную версию.
Скачать бесплатную пробную версию
| Особенность | Определение |
|---|---|
| Привязка данных | Вы можете привязать DropDownList к локальным массивам данных или удаленным службам данных. |
| Группировка | DropDownList позволяет отображать элементы данных, классифицированные по определенному полю модели. |
| Фильтрация серверов | Вы также можете фильтровать данные DropDownList на сервере и отображать только подмножество данных. |
| Виртуализация | С помощью DropDownList вы можете отображать большие наборы данных, используя альтернативу для разбиения этих данных на страницы. |
| Шаблоны | Список DropDownList позволяет полностью контролировать отображение его элементов, выбранных значений и заголовков всплывающих окон. |
| Добавление новых позиций | Кроме того, вы можете разрешить пользователям добавлять новый элемент, когда результаты поиска не соответствуют их условиям фильтрации. |
| Каскадные раскрывающиеся списки | Каскадная функциональность DropDownList позволяет реализовать серию из двух или более DropDownList, в которой каждый DropDownList фильтруется в соответствии с выбранными параметрами в предыдущем DropDownList. |
| Визуализация и размеры | Компонент DropDownList предоставляет набор параметров для управления его общим размером, радиусом границы для его тегов и способом применения его цвета. |
| Глобализация | DropDownList поддерживает глобализацию, чтобы гарантировать, что он может хорошо вписаться в любое приложение, независимо от того, какие языки и локали должны поддерживаться. Кроме того, DropDownList поддерживает отрисовку в направлении справа налево (RTL). |
| Доступность | Список DropDownList доступен для программ чтения с экрана, поддерживает атрибуты WAI-ARIA и предоставляет сочетания клавиш для более быстрой навигации. |
Чтобы узнать больше о внешнем виде, структуре и доступности DropDownList, посетите документацию Progress Design System — информационный портал, предлагающий подробные рекомендации по использованию компонентов, описания доступных переменных стиля и сведения о поддержке глобализации.
- Начало работы с раскрывающимся списком Kendo UI для jQuery
- Основное использование раскрывающегося списка (демонстрация)
- Справочник по API JavaScript для DropDownList
- Привязка DropDownList к данным
- Группировка в DropDownList
В этой статье
Несколько выпадающих списков с использованием jQuery Ajax и PHP — УЧИТЕСЬ КОДИТЬ
Патрик Морроу
jQuery, PHP, HTML, MySQL
Патрик Морроу
jQuery, PHP, HTML, MySQL
В этом курсе вы узнаете, как заполнить выпадающий список на основе значения другого выпадающего списка. Это обычно используется для стран и штатов.
Например:
Вы будете создавать 4 файла:
dbConfig.
phpindex.php
style.css
getStates.php
9 0092
phpПрисоединяйтесь к курсу и получите доступ к высококачественным видеоурокам, объясняющим каждый шаг этого урока. Кроме того, получите доступ к подсказкам и советам, описанным в этом уроке. У вас также будет доступ к инструктору на всякий случай, если у вас возникнут какие-либо проблемы.
ШАГ 1
Мы начнем с рассмотрения отношений, необходимых для нашей базы данных.
Нам понадобится таблица для стран и таблица для штатов.
Две таблицы будут иметь отношение «один ко многим», т. е. в одной стране будет много штатов.
Обратите внимание, как связаны две таблицы. У нас есть countryId в качестве внешнего ключа в таблице состояний.
Теперь мы можем создавать таблицы. Вы можете скачать дамп SQL здесь или создать свои собственные таблицы на основе приведенной выше диаграммы взаимосвязей.
ЭТАП 2
Теперь мы можем создать сценарий подключения для подключения к базе данных. Детали вашего подключения будут различаться в зависимости от вашей платформы и учетных данных для входа. Я буду использовать базу данных MySQL и соединение PDO.
При необходимости сохраните этот файл. Я назову свой dbConfig.php.
ШАГ 3
Создайте файл с именем index.php.
Теперь мы создадим HTML для раскрывающихся списков. Мы начнем с базового шаблона HTML5 и подключений к Bootstrap css, нашим собственным стилям css и jQuery:
ШАГ 4
Теперь структура раскрывающихся списков. Поскольку мы используем Bootstrap, я добавил несколько классов форм, чтобы упростить стилизацию.
ШАГ 5
Мы хотим, чтобы раскрывающийся список штатов был скрыт по умолчанию и отображался только при выборе страны.
Поэтому мы создаем нашу страницу style.css и добавляем следующий код:
ШАГ 6
В раскрывающемся списке стран необходимо заполнить список стран при загрузке страницы.
Мы можем добавить необходимый код php и вызов базы данных в верхней части страницы:
ШАГ 7
Теперь мы пройдемся по результатам и создадим отдельный элемент списка опций для каждой страны (строки 24–28):
ШАГ 8
выпадающий список для обновления. Поэтому нам нужно выполнить действие, когда список стран был изменен.
Мы добавляем атрибут onChange, который вызывает функцию getStates() в строке 22.
Мы передаем this.value – идентификатор выбранной страны.
ШАГ 9
Теперь мы можем написать функцию jQuery с именем getStates.
Чтобы убедиться, что раскрывающееся меню страны передает значение выбранной страны в функцию, мы можем просто использовать простую команду предупреждения. Строки с 15 по 19.
Если все работает, у вас должно появиться предупреждение при смене страны. Идентификатор страны должен появиться во всплывающем окне.
Вы должны увидеть что-то вроде этого:
ШАГ 10
Теперь мы можем приступить к остальной части кода jQuery.
Строка 16: мы создаем функцию и принимаем аргумент countryId . Это this.value , которое мы передали функции в строке 37.
Строка 17: по умолчанию список выбора состояний скрыт, поэтому теперь мы показываем его. в то время как вызов ajax обрабатывается ниже
Строка 19: это запрос ajax
Строка 20: мы используем метод POST
Строка 21: URL-адрес страницы, на которую мы отправляем данные (нам еще предстоит создать эту страницу)
Строка 22: тип данных, который мы ожидаем в ответ на наш запрос
Строка 23: данные, которые мы размещение на странице в строке 19. Мы отправляем идентификатор страны.
Строка 25: по завершении обработки мы должны получить часть данных обратно.
Строка 26: мы обновляем выпадающий список состояний0003
Строка 2: мы проверяем, действительно ли мы получили значение для страны
Строка 3: нам требуется подключение к нашей базе данных
Строка 4: мы присваиваем опубликованное значение идентификатора страны переменной $countryId.