A small provincial and municipal related menu took a lot of time to explore. The reason is that it is not skilled in jquery. Since it has worked so hard to complete a component, it naturally wants to share it for those in need to use it.
This is just a basic version, and it needs to be optimized later.
Code: Provincial and municipal related menu download address
illustrate:
I won’t talk about the sql statement anymore, it contains two files “city.sql” and “provincial.sql”.
1. Let’s talk about getting data first
public void initProcitys() { logger.info("get the region"); List<Provincials> provinces = Provinces.me.getProvincials(); for (Provincials provincial : provinces) { List<Citys> cities = Citys.me.getCitysByProvincialId(provincial.getLong("id")); provincial.put("citys", JsonKit.toJson(citys)); } setAttr("provincials", provinces); render("procity.jsp");}1). Get all provincial menus first.
2). Get the corresponding municipal menu according to the provincial id.
3). When obtaining municipal menus, please note that list is converted to json data, and JackJson is used here.
2. Talk about page layout
<select name="province_code" id="province_select"> <c:forEach items="${provincials}" var="item"> <option value="${item.procode}" cdata='${item.citys}'>${item.proname}</option> </c:forEach></select><select name="city_code" id="city_select"></select>1). Two selects were used, and no styles were added yet
2). Use foreach to initialize the provincial menu first, and at the same time bind its city data to the cdata attribute.
3. Tell me about js implementation
$(function() { provincialChange(); var $provincial = $("#province_select"); $provincial.change(provincialChange);});function provincialChange() { var $provincial = $("#province_select"); // The code value displayed at the provincial level var provincial_code = $provincial.val(); var $selectedOption = $('#province_select option[value=' + provincial_code + ']'); var city_data = YUNM.jsonEval($selectedOption.attr("cdata")); // Municipal menu list $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("<option value='"+code+"'>"+cname+"</option>"); }}1). When page initialization loading and provincial menu switching, municipal menus need to be loaded
2). First get the provincial menu, get the current value, and then get the option according to the value
3). Obtain municipal data from option, and pay attention to using eval to convert the data. The specific reason can be that it is mainly to add ().
4.) Loop through the municipal menu and output display
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, and I hope it will be helpful for everyone to learn Bootstrap programming.