=================================================
部分代码:
===========================================">
首頁 > web前端 > js教程 > js實作一個省市區三級連動選擇框程式碼分享_javascript技巧

js實作一個省市區三級連動選擇框程式碼分享_javascript技巧

WBOY
發布: 2016-05-16 17:41:01
原創
1432 人瀏覽過

運作效果:
js實作一個省市區三級連動選擇框程式碼分享_javascript技巧 
====================================== ===========
部分代碼:
============================== ===================
當然首先你資料庫中要有這個table,不然你沒有資料.....^_^

複製程式碼 程式碼如下:



所在地:











js程式碼:
複製程式碼 程式碼如下:

/**
* 加載市
*
*/
function loadCity() {
* 載入區
*
var provinceId = $("#provinceSelect option:selected").val();
if(provinceId == null || provinceId == ""){
//alert("找不到省份" );
}else{
$.post(rootPath "/loadCity", {
"q" : provinceId
}, function(data, result) {
if(data == "noId"){
alert("請求錯誤");
}else if(data == "null"){
alert("系統找不到屬於該省的市");
}else{
data = eval("{" data "}");
var citySelect = $("#citySelect");
var myCity = $("#myCity").val ();
citySelect.html("");
for ( var i = 0; i if(myCity != null && myCity != "" && myCity > 0 && myCity == data[i].id){
citySelect.append("");
}else{
citySelect.append("");
}
}
loadRegion();
}
});
}
};
/**
* 省改變事件
*
*/
function loadRegion() {
var cityId = $("#citySelect option:selected").val();
if(cityId == null || cityId == "" || cityId alert("找不到城市");
}else{
$.post(rootPath "/loadRegion", {
"q" : cityId
}, function(data, result) {
if(data == "noId"){
alert("請求錯誤");
}else if(data == "null"){
alert ("系統找不到屬於該市的區域");
}else{
data = eval("{" data "}");
var regionSelect = $("#regionSelect");
var myRegion = $("#myRegion").val();
regionSelect.html("");
for ( var i = 0; i if(myRegion != null && myRegion != "" && myRegion > 0 && myRegion == data[i].id){
regionSelect.append("");
}else{
regionSelect.append("");
}
}
}
});
}
};
/**
* 市改變事件
*
*/
$("#provinceSelect").change(loadCity);
/***/
$("#citySelect").change( loadRegion);

$(function() {
loadCity();
});

後台方法:

後台方法:
複製程式碼 程式碼如下:

/**
* 載入城市資料
*
*/
public void loadCity() {
if (q == null || q.trim().equals("")) {
寫(“noId”);
} else {
列表;城市 = xzqhService.queryCitys(q.trim());
if (citys == null || citys.size() write("null");
} else {
StringBuilder builder = new StringBuilder("[");
for (Xzqh city : citys) {
builder.append("{'id':'");
builder.append(city.getCityId());
builder.append("','name':'");
builder.append(city.getCity());
builder.append("'},");
}
if (builder.length() > 1)
builder.replace(builder.length() - 1, builder.length(), "]");
write(builder.toString());
}
}
}
/**
* 載入區資料
*
*/
public void loadRegion() {
if (q == null || q.trim().equals ("")) {
write("noId");
} else {
列表;城市 = xzqhService.queryDistricts(q.trim());
if (citys == null || citys.size() write("null");
} else {
StringBuilder builder = new StringBuilder("[");
for (Xzqh 區:城市) {
builder.append("{'id':'");
builder.append(district.getRegionId());
builder.append("','name':'");
builder.append(district.getRegion());
builder.append("'},");
}
if (builder.length() > 1)
builder.replace(builder.length() - 1, builder.length(), "]");
write(builder.toString());
}
}
}
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板