Связать два select

Обновлено: 24.04.2024

Исходные файлы текущей статьи вы можете скачать по ссылке.

Сразу договоримся, что мы реализуем простейший пример зависимых списков, чтобы понять принцип работы с ними. Более продвинутое решение вы можете найти в уроках Зависимые списки средствами AJAX.

Итак, что же такое зависимые списки? Полагаю, вы могли видеть их уже не раз при заполнении всевозможных форм. Судя по названию, это списки, которые каким-то образом зависят друг от друга. И это действительно так. Яркий пример это список стран и список городов. Мы без проблем можем вывести список всех стран мира, их будет несколько сотен. Но вот выводить список городов всех этих стран — дело бессмысленное, поскольку мы получим список из тысяч городов.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Начнем с данных, которые нам потребуются для работы. Чтобы не создавать БД, я воспользуюсь уже готовой, это будет БД world, которую вы можете скачать с официального сайта MySQL или просто взять из исходников. В этой базе вы найдете три таблицы: страны, города и языки. В работе нам пригодятся таблицы городов и стран.

Теперь нам потребуется форма с двумя списками. Примерно так они будут выглядеть:

And I want to list different sets of options according to the selection in sel1 . I could get the selected value using onchange attribute like this:

But I can't come up with a way to use this value to output different select options in sel2 . Help please!

2 Answers 2

You almost got there. As you already got sel1 's value, the rest is to filter options for sel1 based on the value.

I drummed up a version that can handle an unlimited amount of select combo dropdown list boxes, using jQuery. Hope this is useful to someone.

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Not the answer you're looking for? Browse other questions tagged html forms html-select or ask your own question.

Linked

Hot Network Questions

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Написанный на jQuery, плагин Select2 совместим как с современными, так и с достаточно древними браузерами: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+. Select2 поддерживает множество языков, для этого достаточно подключить соотвествующий языку JS файл (напр., dist/js/i18n/ru.js ) после dist/js/select2.full.min.js

Преимущества Select2

Улучшенная реализация поиска по стандартному select.
Удобная реализация работы с мультивыбором.
Загрузка данных средствами JavaScript: простое получение данных через AJAX и использование их в поиске.
Группировка опций: стандартный тег select умеет один уровень, в Select2 это ограничение отсутствует.
Возможность добавлять новые элементы на лету.
Возможность динамической подгрузки наборов данных на основе поискового запроса.
Постраничная подгрузка списков, когда результаты прокручиваются до конца.
Шаблоны: поддержка пользовательских видов вывода результатов и секций.

Начало работы с SELECT2

Для того, чтобы использовать этот плагин, вам понадобится подключить файлы плагина к вашей странице сайта. Select2 размещен на CDN, что позволяет быстро подключить его, дастаточно лишь написать на странице:

В некоторых случаях, когда у вас нет возможности использовать плагин через CDN сеть, можно подключить его с вашего локального сервера. Для этого скачайте плагин с GitHub и положите файлы select2.min.css и select2.min.js в директории, в которых находятся стили и скрипты для вашего проекта. Тереь вам останется лишь подключить их, указав правильные пути в атрибутах href и src.

Примеры использования Select2.

Одиночный стилизованный select

Select2 может взять обычный select.

и сделать его таким:

Стилизация нескольких select

Select2 также поддерживает блоки выбора с несколькими значениями. Используйте для этого атрибут multiple.

Плейсхолдеры

Значение плейсхолдера может быть задано вручную, и будет показываться пока в блоке ничего не выбрано. Select2 использует атрибут placeholder для нескольких полей выбора, который поддерживается с IE 10+. Для более старых версий Internet Explorer используйте полифил .

В добавок к вариантам стандартного , Select2 также может обрабатывать данные, полученные из других источников.

Загрузка массива данных

Select2 позволяет загружать данные из локального массива. Вы можете делать выбор данных массива путём создания тега для выбранных значений. Эта операция схожа с той, что есть в обычном select’е.

Загрузка удаленных данных

Select2 имеет встроенную поддержку AJAX с использованием JQuery AJAX методов. В рассматриваемом ниже примере, мы can search for repositories using GitHub's API.

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

Вы можете настроить как Select2 будет искать удаленные данные с помощью свойства ajax :

Select2 передаст любые настройки объекту ajax в функцию jQuery $.ajax ,либо функцию transport , которую вы укажете.

Режим блокировки

Select2 будет реагировать на атрибут disabled элементов тега . Вы также можете инициализировать Select2 с параметром disabled: true для достижения того же эффекта.

Блокировка выбора элементов списка

Select2 правильно обработает заблокированные результаты вместе с данными от самого выбора (когда атрибут disabled установлен), так и от удаленных источников, в которых установлен объект disabled: true set.

Ограничение количества выбора

В Select2 блоки выбора с несколькими значениями могут устанавливать ограничения на максимальное количество выбранных вариантов. Ниже, форма выбора имеет атрибуты multiple и maximumSelectionLength в настройках Select2.

Скрытие формы поиска

Select2 позволяет скрыть окно поиска в зависимости от количества отображаемых вариантов. В этом примере мы используем значение Infinity говоря jQuery плагину Select2 никогда не показывать окна поиска.

Программное управление. События DOM

Select2 запускает некоторые события с оригинальным выбранным элементом, позволяя вам объединять его с другими компонентами.

change запускается вне зависимости от того, выбран ли вариант, или удален.

select2:open вызывается, когда раскрывающийся список открыт. select2:opening запускается перед этим и может быть остановлен.

select2:close вызывается, когда раскрывающийся список закрыт. select2:closing запускается перед этим и может быть остановлен.

select2:select запускается как только выбран вариант. select2:selecting запускается перед этим и может быть остановлен.

select2:unselect запускается как только с варианта снят выбор. select2:unselecting запускается перед этим и может быть остановлен.

Программный доступ

Select2 поддерживает методы, которые позволяют программно управлять компонентом.

Всем привет, опишу ситуацию. Есть 2 селекта: марка и модель автомобиля. В зависимости от выбранной марки, во второй селект грузиться нужный список моделей автомобиля.
Удалось реализовать для 1 марки:

Ссылка на fiddle
Каким образом сделать для нескольких марок автомобилей? (особенно когда их будет много)

Оценить 2 комментария

Роман Ахмадуллин: Он грузит одно и тоже значение моделей, к любой марке. Как по другому сделать не соображу(

Если не захотите встраивать еще одно библиотеку по примеру выше.
То стоит вместо обработчика click поставить на первый select обработчик change, который будет отслеживать изменения. И в теле обработчика получаете value выставленного option и по нему обрабатываете нужный json во второй select.

Я бы сделал вот так, если честно :) На основе Riot.js. На нём подобные вещи становятся очень простыми. Порог понимания JS там более высокий, чем писать обычные портянки на jQuery, но оно того стоит.

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

Несколько свойств и методов, которые будет использовать наше решение:

clip-path для создания настраиваемой стрелки раскрывающегося списка

макет сетки CSS для выравнивания пользовательского поля выбора и стрелки

пользовательские переменные CSS для гибкого стиля

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

единицы em для относительных размеров

Распространенные проблемы с нативным select

Как и для всех типов полей формы, у select первоначальный вид в разных браузерах различается. Слева направо, вот исходный вид select в Firefox, Chrome и Safari:

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

Базовый HTML

Для начала мы сосредоточимся на одиночном select.

Метка не является частью нашего упражнения, но включена в общем требовании, в частности, с атрибутом for, имеющим значение свойства id для select.

Чтобы реализовать наши пользовательские стили, мы для простоты в этом руководстве заключили пользовательский select в дополнительный div с классом select.

Сбросить и удалить унаследованные стили

Как и во всех моих руководствах в качестве передовой современной практики, мы сначала добавляем следующий сброс:

После этого мы можем начать правило для нативного select и применить следующее к его внешнему виду:

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

Примечание: CodePen настроен на использование автопрефикса, который добавит необходимые предварительно фиксированные версии свойства appearance. Возможно, вам придется специально настроить это для своего проекта или добавить их вручную. Мой HTML / Sass Jumpstart включает автопрефиксатор, как часть производственной сборки.

Хорошая новость в том, что мы можем добавить еще одно правило, чтобы убрать стрелку для более ранних версий IE, если вам это нужно:

Последняя часть — удалить значение по умолчанию outline. Не волнуйтесь — позже мы добавим ему замену для состояния :focus!

А вот гифка нашего прогресса. Вы можете видеть, что теперь нет визуальной индикации того, что это select до того, как кликнуть по нему:

Пользовательские стили поля выбора

Сначала давайте настроим некоторые переменные CSS. Это позволит гибко перекрашивать наш select, чтобы отображать состояние ошибки.

Примечание для специальных возможностей: как элемент пользовательского интерфейса выделенная граница должна иметь контраст 3:1 или выше по сравнению с цветом окружающего пространства.

Теперь пришло время создать стили select, которые мы применим к нашей оболочке div.select:

Сначала мы устанавливаем некоторые ограничения по ширине. Значения min-width и max-width в основном предназначены для этой демонстрации, и вы можете отказаться от них или изменить их для своего варианта использования.

Затем мы применяем некоторые свойства блочной модели, в том числе border, border-radius и padding. Обратите внимание на использование единицы em, которая будет сохранять эти свойства пропорциональными набору font-size.

В сбросе стилей, мы установили для нескольких свойств inherit, так что здесь мы определяем их, в том числе font-size, cursor и line-height.

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

Пользовательская стрелка раскрывающегося списка выбора

Для нашей стрелки раскрывающегося списка, мы будем использовать одно из самых интересных современных свойств CSS: clip-path.

Обрезка контуров позволяет нам создавать всевозможные формы, «обрезая» квадратные и прямоугольные фигуры, которые мы получаем по умолчанию от большинства элементов. Я получил удовольствие от использования clip-path при моем недавнем редизайне сайта-портфолио.

До получения лучшей поддержки clip-path альтернативные методы включали:

background-image — обычно в формате PNG, более современным будет SVG

встроенный SVG как дополнительный элемент

трюк границы, чтобы создать треугольник

SVG может показаться оптимальным решением, однако при использовании в background-image в качестве иконки он теряет способность действовать как иконка в том смысле, что не может изменять свои свойства, такие как цвет заливки, без его полного переопределения. Это означает, что мы не можем использовать переменную CSS.

Размещение встроенного SVG-файла решает проблему с цветом, однако это означает добавление еще одного элемента каждый раз, когда определяется select.

С помощью clip-path мы получаем четкую, масштабируемую «графику» стрелки, которая выглядит как SVG, но с преимуществами возможности использовать пользовательскую переменную и определения через стили вместо разметки HTML. Чтобы создать стрелку, мы определим ее как псевдо-элемент ::after.

Читайте также: