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,還沒有加式樣
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極速開發(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-06
JavaScript選取(picking)和反選(rejecting)對(duì)象的屬性方法
這篇文章主要介紹了JavaScript選取(picking)和反選(rejecting)對(duì)象的屬性方法的相關(guān)資料,需要的朋友可以參考下2017-08-08
JavaScript設(shè)計(jì)模式之調(diào)停者模式實(shí)例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之調(diào)停者模式,詳細(xì)分析了調(diào)停者模式的概念、原理、優(yōu)缺點(diǎn)并結(jié)合javascript實(shí)例形式給出了相關(guān)使用技巧,需要的朋友可以參考下2018-02-02
jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量
這篇文章主要介紹了jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量的實(shí)現(xiàn)方法,非常的實(shí)用,這里推薦給小伙伴,有需要的朋友可以參考下。2015-04-04
在vs2010中調(diào)試javascript代碼方法
只在IE瀏覽器中測(cè)試成功了,在谷歌瀏覽中沒有測(cè)試成功,其他瀏覽器沒有測(cè)試。2011-02-02
JavaScript實(shí)現(xiàn)微信號(hào)隨機(jī)切換代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)微信號(hào)隨機(jī)切換代碼,需要的朋友可以參考下2018-03-03

