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

操作効果：

====================================== == ===========
コードの一部:
========================== ====== ===================
もちろん、最初にこのテーブルをデータベースに含める必要があります。そうしないとデータがありません...^ _^

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

場所:


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


${xzqh.province }


select>

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

* 都市をロード

*
*/
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());
}
}
}