Небольшое провинциальное и муниципальное меню заняло много времени, чтобы исследовать. Причина в том, что это не квалифицировано в jQuery. Поскольку он так усердно работал над завершением компонента, он, естественно, хочет поделиться им для тех, кто нуждается в его использовании.
Это всего лишь базовая версия, и ее необходимо оптимизировать позже.
Код: провинциальный и муниципальный меню.
иллюстрировать:
Я больше не буду говорить о заявлении SQL, он содержит два файла «City.sql» и «Provincial.sql».
1. Давайте сначала поговорим о получении данных
public void initProcitys () {logger.info («Получить регион»); Список <Vinincials> провинции = провинции.me.getProvincials (); для (провинциальные провинции: провинции) {list <titys> citions = citys.me.getcitysbyprovincialid (provincial.getlong ("id")); Provincial.put ("Citys", jsonkit.tojson (Citys)); } setattr ("Провинции", провинции); render ("procity.jsp");}1). Получите все провинциальные меню в первую очередь.
2). Получите соответствующее муниципальное меню в соответствии с провинциальным удостоверением личности.
3). При получении муниципальных меню обратите внимание, что список преобразуется в данные JSON, а Джексон используется здесь.
2. Разговор о макете страницы
<select name = "province_code" id = "province_select"> <c: foreach elects = "$ {provincials}" var = "item"> <vitue value = "$ {item.procode}" cdata = '$ {item.citys}'> $ {item.proname} </option> </c: for Peach> <//select> <//name <//cethece> <//wome> </c id = "city_select"> </select>1). Были использованы два выбора, и еще не добавлены стили
2). Используйте Foreach для инициализации провинциального меню в первую очередь, и в то же время свяжите свои городские данные с атрибутом CDATA.
3. Расскажите мне об реализации JS
$ (function () {provincialChange (); var $ provincial = $ ("#province_select"); $ provincial.change (provincialchange);}); function provincialChange () {var $ provincial = $ ("#province_select"); // Значение кода, отображаемое на провинциальном уровне var provincial_code = $ provincial.val (); var $ selectedOption = $ ('#province_select опция [value =' + provincial_code + ']'); var city_data = yunm.jsoneval ($ selectedoption.attr ("cdata")); // Список муниципальных меню $ city_select = $ ("#city_select"); $ city_select.empty (); for (var i = 0; i <city_data.length; i ++) {var code = city_data [i] .code; var cname = city_data [i] .cname; $ city_select.append ("<antain value = '"+code+"'>"+cname+"</option>"); }}1). Когда инициализация страницы загрузка и переключение меню провинции необходимо загрузить муниципальные меню
2). Сначала получите провинциальное меню, получите текущее значение, а затем получите вариант в соответствии со значением
3). Получите муниципальные данные из опции и обратите внимание на использование Eval для преобразования данных. Конкретная причина может заключаться в том, что в основном это добавить ().
4.) Проверка через муниципальное меню и выходной дисплей
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Вышеуказанное посвящено этой статье, и я надеюсь, что всем будет полезно изучить программирование начальной загрузки.