js は州と市の 3 レベルのリンク選択ボックスを実装します。コード共有

js は州と市の 3 レベルのリンク選択ボックスを実装します。コード共有_JavaScript スキル

WBOY

リリース： 2016-05-16 17:41:01

オリジナル

1439 人が閲覧しました

操作効果：
js は州と市の 3 レベルのリンク選択ボックスを実装します。コード共有_JavaScript スキル
====================================== == ===========
コードの一部:
========================== ====== ===================
もちろん、最初にこのテーブルをデータベースに含める必要があります。そうしないとデータがありません...^ _^

コードをコピーしますコードは次のとおりです。

場所:

input type="hidden" id="myRegion" value="${user.regionId}"/>

コードをコピーしますコードは次のとおりです: /**

* 都市をロード

* 
*/ 
function loadCity() { 
varprofitId = $("#provinceSelect オプション:選択済み").val() ; 
if(provinceId == null || 州 ID == ""){ 
//alert("州が見つかりません"); }else{ 
$.post(rootPath "/loadCity", { 
"q" : 州 ID 
}, function(data, result) { 
if(data == "noId"){ 
alert("リクエストエラー"); 
}else if(data == "null"){ 
alert("システムはその州に属する都市を見つけることができません"); { 
data = eval("{" data "} "); 
var citySelect = $("#citySelect"); 
var myCity = $("#myCity"); 🎜>citySelect.html(""); 
for ( var i = 0; i if(myCity != null && myCity != "" && myCity > 0 && myCity == data[i].id){ 
citySelect.append("" 
 data[i] .name ""); 
 }else{ 
citySelect.append(" data[i] .name ""); 
 } 
} 
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 "}"); 
varregionSelect = $( "#regionSelect"); 
var myRegion = $(" #myRegion").val(); 
regionSelect.html(""); 
for ( var i = 0; i if(myRegion != null && myRegion != "" && myRegion > 0 && myRegion == data[i].id){ 
regionSelect.append("" 
 data[i].name ""); 
}else{ 
regionSelect.append(" " 
 data[i].name ""); 
} 
} 
} 
}); 
} 
}; 
/**
* 領地変更イベント 
* 
*/ 
$("#provinceSelect").change(loadCity); / 
$("#citySelect").change(loadRegion ); 

$(function() { 
loadCity(); 
}); >バックグラウンド メソッド: 




コードをコピー


 コードは次のとおりです:
 
/**
* 都市データをロード 
* 
*/ 
public voidloadCity() { 
if (q == null || q.trim().equals("")) { 
 write("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 voidloadRegion() { 
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()); 
} 
} 
} 