jquery が ajax リンケージ ボックスを実装する方法 (1)_jquery

前台页面

复制代码代码如下:

任务分类：

付
jquery.select.js

复制代码代码如下:

/*
Ajax 3 レベル連携
日付: 2013-2-26
設定パラメータの説明
-----
firstUrl: 第一レベルのドロップ-データ取得 URL 、josn は
firstValue: デフォルトの第 1 レベルのドロップダウン値を返します。
secondUrl: 第 2 レベルのドロップダウン データ取得 URL、josn は
secondValue: デフォルトの第 2 レベルのドロップダウン値を返します
thirdUrl: 第 3 レベルのドロップダウン データ取得 URL、josn Return
thirdValue: デフォルトの 3 レベル ドロップダウン値
nodata: データなしステータス
required: 必須オプション
-- ------------------- -------- */
(function($){
$.fn.linkSelect=function( settings){
if($(this).size()//デフォルト値
settings=$.extend({
firstUrl:"js/ city.min.js",
firstValue:null,
SecondValue: null,
thirdValue:null,
nodata:null,
required:true
},settings);
var box_obj=this;
var first_obj=box_obj.find(".first");
var third_obj=box_obj.find(" .third");
var select_prehtml=(settings.required) ? "" : "選択してください";
var prepareSelectHtml=function(jsonArray){
var temp_html=select_prehtml;
$.each(jsonArray,function(index,row){
temp_html ="" row.text "< /option>";
});
return temp_html;
};
// 2 番目のドロップダウン ボックス関数を割り当てます
var SecondStart=function(){
second_obj. empty().attr("無効",true);
third_obj.empty( ).attr("無効",true);
if(first_obj.val()==''){
return;
}
$.getJSON(settings.secondUrl, { firstValue: first_obj.val(), time: new Date().getTime() }, function(jsonResult){
if(!jsonResult .success){
if(settings.nodata=="none"){
second_obj.css("display","none");
third_obj.css("display","none"); ;
}else if(settings.nodata=="hidden"){
first_obj.css("visibility","hidden");
third_obj.css("visibility","hidden");
};
return;
}
// 二次ドロップダウン リストの割り当て
second_obj.html(prepareSelectHtml(jsonResult.data)).attr("disabled",false)。 css({"display":"","visibility":""});
thirdStart()
});

};ドロップダウン ボックス関数
var thirdStart=function(){
third_obj.empty().attr ("disabled",true);
$.getJSON(settings.thirdUrl, { firstValue: first_obj.val (),secondValue:second_obj.val(), time: new Date().getTime() }, function( jsonResult){
if(!jsonResult.success){
if(settings.nodata==" none"){
third_obj.css("display","none");
}else if(settings.nodata=="hidden"){
third_obj.css("visibility","hidden ");
};
return;
}
// 割り当て 3 レベルのドロップダウン リストをトラバースします
third_obj.html(prepareSelectHtml(jsonResult.data)).attr("disabled" ,false).css({"表示":"","可視性":""});
thirdStart ()
}); {
// 割り当ての 1 レベルのドロップダウン リストを移動します
$.getJSON(settings.firstUrl, {time: new Date().getTime() }, function(jsonResult){
if( !jsonResult.success){
return;
}
// 割り当てられた 1 レベルのドロップダウン リストをスキャンします
first_obj.html(prepareSelectHtml(jsonResult.data)); );
// 第 1 レベルと第 2 レベルの値が渡された場合は、それらを選択します。 (setTimeout は IE6 との互換性のために設定されています)
setTimeout(function(){
if(settings.firstValue && settings.firstValue.length>0){
first_obj.val(settings.firstValue);
SecondStart();
setTimeout(function(){
if(settings.秒値 && 設定.秒値.長>0){
秒_obj.val(設定.秒値);
三番目の開始() ;
setTimeout(function(){
if(settings.thirdValue && settings.thirdValue.length>0){
third_obj.val(settings.thirdValue);
};
}, 1 );
};
},1);
}); first_obj.bind("change",function(){
secondStart();
});
// 2 番目のレベルが選択されるとイベントが発生します
second_obj.bind("change", function(){
thirdStart();
});
}//最初のドロップダウン ボックスを初期化します
}; )(jQuery);


${rc.contextPath}/repair/loadCategory 対応するバックグラウンド メソッドと戻り値の JSON 値:




コードをコピー


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

@RequestMapping("loadCategory")
@ResponseBody
public Map loadCategory(ModelMap モデル){
String msg = "";
ブール値 isSuccess = false;
リスト>マップ = 新しい ArrayList>();
試してください {
リスト<カテゴリ>カテゴリ = categoryService.findAllCategory();
for (カテゴリ カテゴリ : カテゴリ) {
Map map=new HashMap();
map.put("値", category.getId().toString());
map.put("テキスト", category.getCategoryName());
maps.add(マップ);
}
msg = "查找大成功。";
isSuccess=true;
} catch (例外 e) {
msg = "查找大类失。";
log.error("查找大类失败：" e.getMessage(), e);
}
return buildAjaxResult(isSuccess, msg,maps);
}
保護されたマップ buildAjaxResult(boolean isSuccess, String msg, Object data) {
Map resultMap = 新しい HashMap();
resultMap.put("成功", isSuccess);
resultMap.put("msg", msg);
resultMap.put("データ", データ);
結果マップを返します;
}

效果如图：