Front Page
Copy Code code as follows:
<script type= "Text/javascript" src= "${rc.contextpath}/js/jquery.select.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#rwflSelect"). Linkselect ({
NoData: "None",
Required:true,
Firsturl: ' ${rc.contextpath}/repair/loadcategory ',
Secondurl: ' ${rc.contextpath}/repair/loadsubcategory ',
Firstvalue: ' $! {Repair.categoryid} ',//Task large class
SecondValue: ' $! {Repair.subcategoryid} '//Character small class
});
});
</script>
<tr id= "Rwflselect" >
<TD width= class= "T_r prten Field_c" > Task classification:</td>
<TD width= "131" ><select class= "a" name= ' CategoryID ' ></select> </td>
<TD width= "Ten" ></td>
<TD width= "131" ><select class= "second" name= "Subcategoryid" disabled= "disabled" ></select></td >
</tr>
Report
Jquery.select.js
Copy Code code as follows:
/*
Ajax three-level linkage
Date: 2013-2-26
Settings parameter description
-----
Firsturl: First level dropdown data fetch URL,JOSN return
Firstvalue: Default one Level dropdown value
Secondurl: Level Two dropdown data fetch URL,JOSN return
SecondValue: Default Level Two dropdown value
Thirdurl: Level Three dropdown data fetch URL,JOSN return
Thirdvalue: Default Level Three dropdown value
NoData: No data status
Required: Required Options
------------------------------ */
(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 (". a");
var second_obj=box_obj.find (". Second");
var third_obj=box_obj.find (". Third");
var select_prehtml= (settings.required)? "": "<option value= ' > Please choose </option>";
var prepareselecthtml=function (Jsonarray) {
var temp_html=select_prehtml;
$.each (Jsonarray,function (index,row) {
temp_html+= "<option value= '" +row.value+ "' >" +row.text+ "</option>";
});
return temp_html;
};
Assignment level two 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 Assignment Level two Drop-down list
Second_obj.html (prepareselecthtml (Jsonresult.data)). attr ("disabled", false). CSS ({"Display": "", "Visibility": ""}) ;
Thirdstart ();
});
};
Assignment level three 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 Level three Drop-down list
Third_obj.html (prepareselecthtml (Jsonresult.data)). attr ("disabled", false). CSS ({"Display": "", "Visibility": ""});
Thirdstart ();
});
};
var init=function () {
Traverse Assignment Level Drop-down list
$.getjson (Settings.firsturl, {time:new Date (). GetTime ()}, function (Jsonresult) {
if (!jsonresult.success) {
Return
}
Traverse Assignment Level Drop-down list
First_obj.html (prepareselecthtml (jsonresult.data));
Secondstart ();
Select if you have a value that is passed in level two. (SetTimeout is set for compatible 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 you select a level
First_obj.bind ("Change", function () {
Secondstart ();
});
event occurs when level two 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 returns the JSON value:
Copy Code code as follows:
@RequestMapping ("Loadcategory")
@ResponseBody
Public map<string, object> loadcategory (Modelmap model) {
String msg = "";
Boolean issuccess = false;
List<map<string, string>> maps=new arraylist<map<string,string>> ();
try {
List<category> categories= categoryservice.findallcategory ();
for (Category category:categories) {
Map<string,string> map=new hashmap<string, string> ();
Map.put ("Value", Category.getid (). toString ());
Map.put ("Text", Category.getcategoryname ());
Maps.add (map);
}
msg = "Find large class successful." ";
Issuccess=true;
catch (Exception e) {
msg = "Find Large class failed." ";
Log.error ("Find large class Failure:" + e.getmessage (), E);
}
Return Buildajaxresult (issuccess, msg,maps);
}
Protected Map<string, Object> Buildajaxresult (boolean issuccess, String msg, Object data) {
map<string, object> resultmap = new hashmap<string, object> ();
Resultmap.put ("Success", issuccess);
Resultmap.put ("msg", MSG);
Resultmap.put ("Data", data);
return resultmap;
}
Effect as shown:
