jquery怎樣實作ajax連動框(一)_jquery

前台頁

複製程式碼程式碼如下：

$(document).ready(function(){
$("#rwflSelect").linkSelect({
nodata:"none",
required:true,
firstUrl:' ${rc.contextPath}/repair/loadCategory',
secondUrl:'${rc.contextPath}/repair/loadSubCategory',
firstValue:'$!{repair.categoryid}',//任務大類
secondValue:'$!{repair.subcategoryid}'/ /人物小類
})
});
腳本>

任務分類：

附
jquery.select.js

複製代碼代碼如下：

/*
Ajax 三級連動
日期：2013-2-26
settings 參數說明
-----
firstUrl:一級下拉資料取得URL ,josn回傳
firstValue:預設一級下拉value
secondUrl:二級下拉資料取得URL,josn回傳
secondValue:預設二級下拉value
thirdUrl:三級下拉資料取得URL,josn回傳
thirdValue:預設三級下拉value
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_objbox_obj.find(".first ");
var second_obj=box_obj.find(".second");
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 "";
});
return temp_html;
};
// 賦值二級下拉方塊函數
var secondStart=function(){
second_obj.empty().attr("disabled",true);
third_obj.empty().attr("disabled" ,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"){
second_obj.css("visibility=="hidden"){
second_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;
}
// 遍歷賦值三級下拉清單
third_obj .html(prepareSelectHtml(jsonResult.data)).attr("disabled",false).css({"display":"","visibility":""});
thirdStart();
} );
};
var init=function(){
// 遍歷賦值一級下拉清單
$.getJSON(settings.firstUrl, {time: new Date().getTime() }, function(jsonResult){
if(!jsonResult.success){
return;
}
// 遍歷賦值一級下拉清單
first_obj.html(prepareSelectt. ));
secondStart();
// 若有傳入一級與二級的值，則選取。 (setTimeout設定為相容IE6)
setTimeout(function(){
if(settings.firstValue && settings.firstValue.length>0){
first_obj.val(settings.firstValue); secondStart();
setTimeout(function(){
if(settings.secondValue && settings.secondValue.length>0){
second_obj.val(settings.secondValue);
thirdStart();
setTimeout(function(){
if(settings.thirdValue && settings.thirdValue.length>0){
third_obj.val(settings.thirdValue);
};
},1🎜>},1 );
};
},1);
};
},1);
});
// 選擇一階時發生事件
first_obj. bind("change",function(){
secondStart();
});
// 選擇二級時發生事件
second_obj.bind("change",function(){
thirdStart();
});
};
// 初始化第一個下拉框
init();
};
})(jQuery);

${rc.contextPath}/repair/loadCategory 對應的後台方法及返回json值：

複製代碼 程式碼如下:

@RequestMapping("loadCategory")
@ResponseBody
public Map; loadCategory(ModelMap model){
String msg = "";
booleans = boolean false;
List