jquery связанные списки select

Связанные выпадающие списки select без перезагрузки страницы, с использованием jQuery + MySQL + PHP, на примере выбора стран, регионов и городов

Связанные выпадающие списки select с использованием jQuery + MySQL + PHP без перезагрузки страницы

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

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

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

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

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

Итак, решений для формирования связанных между собою списков много. Но мне особенно понравился плагин jQuery Chained Selects своей простотой и отсутствием необходимости надолго нырять в документацию. Для того, чтобы работать с плагином jQuery Chained Selects, который формирует на сайте связанные списки (select), достаточно подготовить их соответствующим образом. Плагин не плодит дополнительных тегов, а работает с уже имеющимися, скрывая или показывая те или иные пункты списка в зависимости от выбора пользователя.

Рассмотрим небольшой пример: нам нужно выбрать машину для аренды (покупки). В первом select’е у нас будут марки автомобилей, а во втором — модельный ряд. Начнем формировать наши списки:

Чтобы связать между собою варианты выбора значений в родительском select со значениями в зависимом select, достаточно ко всем значениям option зависимого select добавить css класс, равный значению option value из родительского select.

Звучит немного мудрено, но сейчас вы все поймете. Взгляните на наш HTML-код:

Чтобы связать наш автомобиль BMW с сериями 3, 5 и 6й мы задали значение соответствующего пункта списка равным bmw , а потом это же значение прописали в классы для соответствующих пунктов зависимого списка. Обращаю ваше внимание, что значения и названия классов чувствительны к регистру, т.е. audi и Audi — это не одно и тоже. Будьте внимательны! Теперь скачаем с официального сайта плагин Chained Selects и подключим его вместе с библиотекой jquery к нашей странице:

Запуск скрипта осуществляется всего одной строкой:

Получили вот такие связанные select:

Если вам нужно 3 и более связанных списков, то нет ничего проще:

Вот, какие три связанных select у нас получились с помощью плагина select chained:

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

Обратите внимание, что дизельный двигатель доступен только для BMW 3 и 5 сериях седанов. Это достигается с помощью классов series-3sedan и series-5sedan .

Подгрузка значений с помощью ajax

Метод работы с удаленной версией сходен с изложенным выше. Вначале подключаем библиотеку jQuery или Zepto и версию Chained Selects для удаленной работы:

В HTML коде вам нужно только прописать тэги option для первого select. Содержимое других select’ов будет построено JSON-методом, возвращаемым в результате работы AJAX-запроса. AJAX-запрос выполняется при изменении значения родительского select.

В коде мы используем метод remoteChained() . Вторым параметром является URL, через который передается AJAX-запрос.

Когда событие изменения срабатывает на родительском select-е, на заданный URL посылается GET-запрос. Этот запрос включает в себя имя и значение родительского элемента, сформированные в виде строковой величины. Например, когда пользователь в своей первой выборке задает BMW, то запрашивается следующее:

При работе плагина Chained Selects ожидается создание JSON-запроса, содержащего значение в виде пары текстов для каждой опции.

Если вам нужно иметь возможность сортировать записи на стороне сервера используйте массив массивов .

. или массив объектов.

Загружаемые select

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

Для того, чтобы BMW 3 серии было выбрано по-умолчанию, вы можете загрузить соответствующие значения в select :

Обратите внимание, что bootstrap в приведенном выше коде не имеет никакого отношения к Twitter Bootstrap — набору компонентов для создания адаптивных сайтов!

Отправка дополнительных значений

Иногда может потребоваться отправить значений больше, чем можно с помощью родительского select . Допустим, у вас есть несколько вариантов трансмиссий (transmission). Cодержимое select’ов для выбора трансмиссии меняется, если пользователь выбирает новый двигатель. Однако возможность использования различных трансмиссий в вашей базе данных зависит также от серии машины. У вас есть четыре различных выпадающих списка select :

Тогда вы можете бы использовать следующий код, чтобы отправить серверу значения #series и #engine :

Значения родительских select отправляются всегда. Вам не нужно специально включать их для настройки зависимостей.

Показ текста «Идет загрузка» (Loading)

Если ваши запросы JSON медленно обрабатываются, вы можете показать текст «Идет загрузка», или любой другой, например, «Loading. «:

У меня есть три условных двумерных массивa:

Так же есть три, несвязанных между собой select, value и text у них тот же самый. У первого select данные из arrayMerged1 и так далее.

Данные массивов были взяты из таблицы ниже:

Так как эта таблица сделана через представление в Drupal 7, то у каждого tr и td есть свои классы, из-за чего к ним можно легко обратиться в скрипте.

Мне предстоит сделать эти select связанными между собой, но я не могу понять, как мне построить логику в скрипте. Другими словами, каким образом при выборе значения в первом select, скрипт будет понимать, какие значения нужно оставить во втором? Так же у меня нет возможности использовать jQuery плагин Chained Selects