How jquery implements ajax linkage box (1)_jquery

前台页面

复制代码 代码如下:

任务分类：

附
jquery.select.js

复制代码 代码如下:

/*
Ajax three-level linkage
Date: 2013-2-26
settings parameter description
-----
firstUrl: first-level drop-down data acquisition URL , josn returns
firstValue: default first-level drop-down value
secondUrl: second-level drop-down data acquisition URL, josn returns
secondValue: default second-level drop-down value
thirdUrl: third-level drop-down data acquisition URL, josn Return
thirdValue: default three-level drop-down value
nodata: no data status
required: required option
--------------------- --------- */
(function($){
$.fn.linkSelect=function(settings){
if($(this).size()<1 ){return;};
//Default value
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 second_obj=box_obj.find(".second");
var third_obj=box_obj.find(".third");
var select_prehtml=(settings.required) ? "" : "Please select";
var prepareSelectHtml=function(jsonArray){
var temp_html=select_prehtml;
$.each(jsonArray,function( index,row){
temp_html ="" row.text "";
});
return temp_html;
};
//Assign the secondary drop-down box function
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");
third_obj.css("visibility","hidden");
};
return;
}
// Traverse Assign secondary drop-down list
second_obj.html(prepareSelectHtml(jsonResult.data)).attr("disabled",false).css({"display":"","visibility":""});
thirdStart();
});

};
// Assign the third-level drop-down box function
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;
}
// Traverse assignment three Level drop-down list
third_obj.html(prepareSelectHtml(jsonResult.data)).attr("disabled",false).css({"display":"","visibility":""});
thirdStart ();
});
};
var init=function(){
// Traverse the assignment one-level drop-down list
$.getJSON(settings.firstUrl, {time: new Date().getTime() }, function(jsonResult){
if(!jsonResult.success){
return;
}
// Traverse the assigned one-level drop-down list
first_obj. html(prepareSelectHtml(jsonResult.data));
secondStart();
// If the first and second level values ​​are passed in, select them. (setTimeout is set for compatibility with 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);
});
// Event occurs when level one is selected
first_obj. bind("change",function(){
secondStart();
});
// An event occurs when the second level is selected
second_obj.bind("change",function(){
thirdStart();
});
};
//Initialize the first drop-down box
init();
};
})(jQuery);

${rc.contextPath}/repair/loadCategory The corresponding background method and return json value:

Copy code The code is as follows:

@RequestMapping("loadCategory")
@ResponseBody
public Map loadCategory(ModelMap model){
String msg = "";
boolean isSuccess = false;
List> maps=new ArrayList>();
try {
List categories= categoryService.findAllCategory();
for (Category category : categories) {
Map map=new HashMap();
map.put("value", category.getId().toString());
map.put("text", category.getCategoryName());
maps.add(map);
}
msg = "查找大类成功。";
isSuccess=true;
} catch (Exception e) {
msg = "查找大类失败。";
log.error("查找大类失败：" e.getMessage(), e);
}
return buildAjaxResult(isSuccess, msg,maps);
}
protected Map buildAjaxResult(boolean isSuccess, String msg, Object data) {
Map resultMap = new HashMap();
resultMap.put("success", isSuccess);
resultMap.put("msg", msg);
resultMap.put("data", data);
return resultMap;
}

效果如图：