JQuery は、都道府県と都市のドロップダウンのリンク効果を作成します box_jquery

リンク効果を実行するには、純粋な JavaScript を使用する場合、多くの場合、更新する必要がある結果セットを保存し、それを元のページにレンダリングするための補助ページが必要になります。前のドロップダウン ボックスが変更された後、同じレベルの後続のすべてのドロップダウン ボックスがクリアされ、更新されたコンテンツが再結合された後に、動的に更新する必要があるコンテンツを自動的に結合することを検討してください。 。 JQuery を使用すると実装が簡単になります。コードは、例として州と都市の連携効果を使用して実装されます。

JSP ページのコードは次のとおりです:

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

原産地:

すべて

<オプション値="${provinceInfo.code}">${provinceInfo.provinceName}

JavaScript コードは次のとおりです:

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

function freshCity(){

if($('#provinceCode').find('option:selected').val( ) == ""){
$('#provinceCode').parent().nextAll('lable').remove();
return;
}
//県名
var 州名 = $('#provinceCode ').find('option:selected').text();
州名 = 州名.substring(0,provinceName.length-4);サブドロップダウン ボックス オプションをクエリするための Json リクエスト data
$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", {
proviceCode : $('#provinceCode').val()
}, function(data) {
// 子のオプションがある場合は、子のドロップダウン ボックスを作成します
if(data != null){
// ドロップ後の兄弟をすべて削除します-down ボックスの親
$(' #provinceCode').parent().nextAll('lable').remove();
var childId = "city";次のレベルのドロップダウン ボックスが存在するかどうかを確認し、存在しない場合は作成します。
if($('#' childId).length == 0){
//

を作成し、 id を追加して

$( "

").appendTo($('#base'));
}else{
//子のドロップダウン ボックスの内容を空にします
$('#' childId) .empty();
}
// json 文字列を調べて、子のドロップダウン ボックスに入力します
$ .each(data.city, function(i, item) {
$(' #' childId).append(
"" item.nameAndCode
"")
}
});
}


次のように、州に応じた都市コードを取得します:

コードをコピーします

コードは次のとおりです。 public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException , JSONEXCEPTION, IOEXception { PROVINCEINFO PROVINCEINFO = This.ProvincityInfoservice .getProvincobaby ("Code", ProvicCode; list & lt; cityInfo & gt; cityList = this.ProvincityInfoservice.getCityListByproperty ("BelongprovindId", "BelongProvinceid", "" ); // Json 文字列を次のように初期化します。

String cityJson = "";

// コレクションを走査し、JSON 文字列を構築します
if (cityList.size() > 0) {
cityJson = "{"city": [";
// クエリされたサブ項目を結合します
for (int i = 0; i CityInfo city = cityList.get(i);
String temp = "{"code":"" city.getCode()
"","nameAndCode":"" city.getName() "(" city.getCode () ")"
" "}";
// コレクション内の最後の項目の場合はターミネータを結合し、それ以外の場合は "," を使用して区切ります
if (i == cityList.size( ) - 1) {
cityJson = cityJson temp "]}";
} else {
cityJson = cityJson temp ","
}
}
/ / 出力文字セットを設定し、 json 文字列を入力して出力します。
response.setCharacterEncoding("UTF-8");
response.getWriter().print(cityJson );