Bootstrap+jfinal實(shí)現(xiàn)省市級(jí)聯(lián)下拉菜單
小小一個(gè)省市級(jí)關(guān)聯(lián)菜單,卻耗費(fèi)了一個(gè)很多時(shí)間來(lái)摸索,原因在于對(duì)jquery不熟練,既然這么辛苦完成了一個(gè)組件,自然想要共享出來(lái),讓需要的人使用。
這只是一個(gè)基礎(chǔ)版,后續(xù)還要再進(jìn)行優(yōu)化。
代碼:省市級(jí)關(guān)聯(lián)菜單下載地址
說(shuō)明:
sql語(yǔ)句就不再說(shuō)了,里面有“city.sql”、“provincial.sql”兩個(gè)文件。
1、先說(shuō)說(shuō)獲取數(shù)據(jù)
public void initProcitys() { logger.info("獲取所在地區(qū)"); List<Provincials> provincials = Provincials.me.getProvincials(); for (Provincials provincial : provincials) { List<Citys> citys = Citys.me.getCitysByProvincialId(provincial.getLong("id")); provincial.put("citys", JsonKit.toJson(citys)); } setAttr("provincials", provincials); render("procity.jsp"); }
1). 先獲取所有的省級(jí)菜單。
2). 根據(jù)省級(jí)id獲取對(duì)應(yīng)的市級(jí)菜單。
3). 在獲取市級(jí)菜單的時(shí)候,注意把list轉(zhuǎn)換為json數(shù)據(jù),這里使用了JackJson.
2、說(shuō)說(shuō)頁(yè)面布局
<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). 使用了兩個(gè)select,還沒(méi)有加式樣
2). 使用foreach先對(duì)省級(jí)菜單進(jìn)行初始化,同時(shí)將其city數(shù)據(jù)綁定到cdata屬性上。
3、說(shuō)說(shuō)js實(shí)現(xiàn)
$(function() { provincialChange(); var $provincial = $("#province_select"); $provincial.change(provincialChange); }); function provincialChange() { var $provincial = $("#province_select"); // 省級(jí)顯示的code值 var provincial_code = $provincial.val(); var $selectedOption = $('#province_select option[value=' + provincial_code + ']'); var city_data = YUNM.jsonEval($selectedOption.attr("cdata")); // 市級(jí)的菜單列表 $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). 頁(yè)面初始化加載和省級(jí)菜單切換時(shí),需要對(duì)市級(jí)菜單進(jìn)行加載
2). 先拿到省級(jí)菜單,獲取當(dāng)前value,然后根據(jù)value獲取option
3). 從option中獲取市級(jí)數(shù)據(jù),注意要使用eval對(duì)數(shù)據(jù)轉(zhuǎn)換,具體原因可以度娘,主要是加上 ()。
4.) 循環(huán)遍歷市級(jí)菜單,進(jìn)行輸出顯示
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)Bootstrap程序設(shè)計(jì)有所幫助。
- JFinal使用ajaxfileupload實(shí)現(xiàn)圖片上傳及預(yù)覽
- JFinal實(shí)現(xiàn)偽靜態(tài)的方法
- JFinal極速開(kāi)發(fā)框架使用筆記分享
- jfinal與bootstrap的登出實(shí)戰(zhàn)詳解
- java 中JFinal getModel方法和數(shù)據(jù)庫(kù)使用出現(xiàn)問(wèn)題解決辦法
- Bootstrap+jfinal退出系統(tǒng)彈出確認(rèn)框的實(shí)現(xiàn)方法
- jfinal與bootstrap的登錄跳轉(zhuǎn)實(shí)戰(zhàn)演習(xí)
- jfinal添加jcaptcha驗(yàn)證碼實(shí)現(xiàn)方法
- Java中JFinal框架動(dòng)態(tài)切換數(shù)據(jù)庫(kù)的方法
相關(guān)文章
javascript控制在光標(biāo)位置插入文字適合表情的插入
使用javascript控制在光標(biāo)位置插入文字,在實(shí)現(xiàn)表情的插入時(shí)會(huì)用到的,需要的朋友可以參考下2014-06-06JavaScript選取(picking)和反選(rejecting)對(duì)象的屬性方法
這篇文章主要介紹了JavaScript選取(picking)和反選(rejecting)對(duì)象的屬性方法的相關(guān)資料,需要的朋友可以參考下2017-08-08JavaScript設(shè)計(jì)模式之調(diào)停者模式實(shí)例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之調(diào)停者模式,詳細(xì)分析了調(diào)停者模式的概念、原理、優(yōu)缺點(diǎn)并結(jié)合javascript實(shí)例形式給出了相關(guān)使用技巧,需要的朋友可以參考下2018-02-02jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量
這篇文章主要介紹了jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量的實(shí)現(xiàn)方法,非常的實(shí)用,這里推薦給小伙伴,有需要的朋友可以參考下。2015-04-04在vs2010中調(diào)試javascript代碼方法
只在IE瀏覽器中測(cè)試成功了,在谷歌瀏覽中沒(méi)有測(cè)試成功,其他瀏覽器沒(méi)有測(cè)試。2011-02-02JavaScript實(shí)現(xiàn)微信號(hào)隨機(jī)切換代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)微信號(hào)隨機(jī)切換代碼,需要的朋友可以參考下2018-03-03