В статье Связанные списки: jQuery Chained Selects мы научились делать связанные списки для классического элемента формы - select. Но что, если у нас кастомизированные выпадающие списки, например, такие как в bootstrap?
Пусть в первом списке у нас будут две категории: вино и сок. Если пользователь выберет вино, то он может выбрать в следующем списке тип вина по цвету: Белое, Красное или Розовое. Если пользователь предпочитает сок, то в списке будут Обычный и Свежевыжатый. Запишем наш HTML-код:
<form>
<select id="categories">
<option value="">Выберите категорию</option>
<option value="vino">Вино</option>
<option value="sok">Сок</option>
</select>
<select id="subcategories">
<option value="">Выберите подкатегорию</option>
<option value="b" class="vino">Белое</option>
<option value="k" class="vino">Красное</option>
<option value="r" class="vino">Розовое</option>
<option value="ob" class="sok">Обычный</option>
<option value="sv" class="sok">Свежевыжатый</option>
</select>
</form>
Код достаточно простой, его мы пояснять не будем. Логика построения списков, думаю, тоже ясна. Если же нет, то прочтите статью Связанные списки: jQuery Chained Selects. Теперь давайте подключим в конце страницы jQuery c bootstrap и посмотрим что у нас получилось:
Мда, выглядит явно не как выпадающие списки в bootstrap. Давайте кастомизируем их с помощью специального плагина для bootstrap под названием Bootstrap-select. Подключите скрипт bootstrap-select.min.js
после скрипта bootstrap.min.js
и стили bootstrap-select.min.css
между открывающим и закрывающим тегом head. Присвоим нашим спискам класс selectpicker
:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Связанные списки (chained selects) в bootstrap</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-select.min.css">
</head>
<body>
<form>
<select id="categories" class="selectpicker">
<option value="">Выберите категорию</option>
<option value="vino">Вино</option>
<option value="sok">Сок</option>
</select>
<select id="subcategories" class="selectpicker">
<option value="">Выберите подкатегорию</option>
<option value="b" class="vino">Белое</option>
<option value="k" class="vino">Красное</option>
<option value="r" class="vino">Розовое</option>
<option value="ob" class="sok">Обычный</option>
<option value="sv" class="sok">Свежевыжатый</option>
</select>
</form>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-select.min.js"></script>
<script>
$(function(){
// здесь мы напишем некий код
});
</script>
</body>
</html>
Естественно, для ускорении загрузки страницы, все стили вы объедините в один файл, а потом заархивируете. Также вы поступите и со скриптами. Но это так, небольшое отступление. Давайте смотреть что у нас получилось:
Это уже больше похоже на правду. Осталось написать небольшой jQuery-код чтобы наша шарманка списки наконец заработали. Сотрите надпись // здесь мы напишем некий код
и вместо нее напишите следующее:
// Очистим форму чтобы при перезагрузке страницы
// данные формы вернулись в исходное значение
$("form").trigger("reset");
// активируем плагин jQuery Chained Selects
$("#subcategories").chainedTo("#categories");
//при изменении значения 1го списка:
$("#categories").change(function(){
// обновляем значения во 2м списке
$("#subcategories").selectpicker('refresh');
});
Voila! Мы получили шикарные связанные списки. Еще одно белое пятно на bootstrap закрыто.