Слияние кода завершено, страница обновится автоматически
jQuery плагин, реализующий многоуровневое связывание. Поддерживает двух-, трёх- и более сложные варианты уровней связи. Также позволяет установить начальные значения при инициализации. Внедряется методами, аналогичными x-editable, но с меньшим весом.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.select.js"></script>
Сначала подключите jQuery и плагин select.
<select id="sel1" style="width: 300px;"></select>
<select id="sel2" style="width: 300px;"></select>
<select id="sel3" style="width: 300px;"></select>
Добавьте три элемента <select> для трёхступенчатого связывания.
<script>
var tempId = {
p_cid: 1,
};
$('#sel1').select({
value: 1,
source: 'http://127.0.0.1/dt/Home/User/getCountry',
success: function(data) {
tempId.p_cid = data;
$('#sel2').select('option', 'source', 'http://127.0.0.1/dt/Home/User/getProvince? p_cid=' + data);
}
});
$('#sel2').select({
value: 1,
source: 'http://127.0.0.1/dt/Home/User/getProvince',
success: function(data) {
$('#sel3').select('option', 'source', 'http://127.0.0.1/dt/Home/User/getCity? p_cid=' + tempId.p_cid + '&p_pid=' + data);
}
});
$('#sel3').select({
value: 1,
source: 'http://127.0.0.1/dt/Home/User/getCity',
success: function(data) {
console.log(data);
}
});
</script>
Инициализируйте эти три элемента <select>.
Теперь всё готово!#### Примечание: Должна быть предоставлена следующая структура данных:
<script>
var source = [{value: 1, text: "Опция 1"}, {value: 2, text: "Опция 2"}];
</script>
Параметр source в конфигурации может быть либо URL, либо массив объектов. Обратите внимание, что URL должен возвращать данные в формате JSON, аналогичному приведённому выше примеру.### Обновление от 28 декабря 2015 года
Часто требуется установка начальных значений для нескольких подобных выпадающих списков. Обычно это делается с помощью серверной части программы или шаблонного движка, чтобы добавить атрибут selected к нужному option.
Для таких случаев этот плагин поддерживает цепочное вызовы и множественные выборки. В этом обновлении были сделаны небольшие изменения для обеспечения корректной работы при динамической привязке множественных выборок, гарантирующей сохранение уже созданных и выбранных выпадающих списков.#### Как использовать: Пример использования:
``````javascript
var finaSelSource = [ {
text : 'Seed round',
value : 'Seed round'
}, {
text : 'Angel round',
value : 'Angel round'
}, {
text : 'Series A',
value : 'Series A'
}, {
text : 'Series B',
value : 'Series B'
}, {
text : 'Series C',
value : 'Series C'
}, {
text : 'Series D',
value : 'Series D'
}, {
text : 'Series E',
value : 'Series E'
}, {
text : 'IPO',
value : 'IPO'
} ];
Затем привязываем наш плагин ко всем выпадающим спискам с классом selL:
<script>
$('.selL').select({
source : finaSelSource
});
</script>
Однако этого недостаточно, если нам нужно динамически добавлять такие выпадающие списки. В местах динамического добавления элементов страницы:
function add() {
$('button', 'form#7-com-money').on('click', function () {
// Здесь добавляем новый элемент
$(this).siblings('ul#y-pub-financ').append('<select class="finanum selL"></select>');
// Привязываем плагин к новому выпадающему списку
$('.selL').select({
source : finaSelSource
});
});
}
Наконец, желаю приятной работы. Я новичок, поэтому буду благодарен за любую помощь и указание на ошибки. Это первая версия, и это мой первый опыт создания jQuery-плагина, так что будьте добры в своих замечаниях :-)
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )