Implementation example of JQuery asynchronous loading of the infinite drop-down box cascade Function
This article mainly introduces the implementation of JQuery asynchronous loading of the infinite drop-down box cascade function. For more information, see
The Code is as follows:
<Pre code_snippet_id = "193059" snippet_file_name = "blog_20140218_4151038704" name = "code" class = "javascript"> /*
JQuery asynchronously loads the infinite pole drop-down box cascade Function
Zjy
*/
(Function ($ ){
$. AjaxSetup ({async: false });
Var url = "";
Var parameter = "";
$. Fn. extend ({
Load: function (urlPath ){
Url = urlPath. url;
Parameter = urlPath. parameter;
$ ("# Ddl1"). append ("<option value = '0' selected = 'selected'> select </option> ");
$. GetJSON (url, parameter, function (data ){
$. Each (data. rows, function (I, row ){
$ ("# Ddl1"). append ($ ("<option> </option>" ).val(row.id#.html (row. text ));
});
$ ("# Ddl1"). change (function () {$ (this). Select ($ (this). val (), this );});
});
$ (This). Selected (parameter. parentId, $ ("# ddl1 "));
},
Select: function (parentId, obj ){
// Debugger;
If (parentId = "0 "){
Return;
}
Parameter. parentId = parentId;
$. GetJSON (url, parameter, function (data ){
$ (Obj). nextAll (". ddl"). remove ();
If (data! = Null ){
$ ("<Select> ",{
"Class": "ddl ",
Change: function (){
$ (This). Select ($ (this). val (), this );
}
}). AppendTo ($ ("# cascade "));
$ (". Ddl ") [$ (". ddl "). length-1]). append ("<option value = '0' selected = 'selected'> select </option> ");
$. Each (data. rows, function (I, row ){
$ (". Ddl ") [$ (". ddl "). length-1]). append ($ ("<option> </option>" Maid (row. text ));
});
}
});
$ (This). Selected (parentId, $ (obj). nextAll (". ddl "));
},
Selected: function (parentId, obj ){
$ (This). GetValue ();
// Debugger;
Var selected = "0," + $ ("# loadselect"). val ();
$. Each (selected. split (","), function (I, row ){
If (row = parentId ){
// Debugger;
$ (Obj). val (selected. split (",") [I + 1]);
$ (Obj). change ();
}
});
},
GetValue: function (){
Var ddlValue;
Var ddlCount = $ (". ddl"). length;
For (var I = ddlCount-1; I> = 0; I --){
If (I! = 0 ){
If ($ (". ddl") [I]). val ()! = 0 ){
DdlValue = $ (". ddl") [I]). val ();
Break;
}
} Else {
If ($ (". ddl") [I]). val () = 0 ){
DdlValue = 0;
Break;
} Else {
DdlValue = $ (". ddl") [I]). val ();
Break;
}
}
}
$ ("# Selectvalue"). val (ddlValue );
},
});
}) (JQuery );
</Pre> <pre code_snippet_id = "193059" snippet_file_name = "external" name = "code" class = "javascript"> </pre> <pre code_snippet_id = "193059" snippet_file_name = ""plugin" name = "code" class = "javascript"> </pre> <pre code_snippet_id = "193059" snippet_file_name = "blog_20140218_2_4146793" name = "code" class = "javascript"> </pre> <pre code_snippet_id = "193059" snippet_file_name = "blog_20140218_3_3020.61" name = "code" class = "javascript"> call method </pre> <pre code_snippet_id = "193059" "snippet_file_name =" blog_20140218_4_4987391 "name =" code "class =" javascript "> <pre code_snippet_id =" 193059 "snippet_file_name =" inline "name =" code "class =" javascript "> <script type = "text/javascript">
$ (Function (){
$ ("# Cascade "). load ({url: '@ Url. action ("GetCountryArea") ', parameter: {"parentId": 0, "random": Math. random ()}});
});
</Script> </pre> <br>
<Pre code_snippet_id = "193059" snippet_file_name = "blog_20140218_5_843717" name = "code" class = "html"> <div id = "cascade">
<Select id = "ddl1" class = "ddl"> </select>
</Div>
<Input id = "loadselect" hidden = "hidden" value = "1, 2"/>
<Input id = "selectvalue" hidden = "hidden"/> </pre> <br>
<Br>
<Pre> </pre>
<Pre> </pre>
<Pre> </pre>
<Pre> </pre>
<Pre> </pre>
<Pre> </pre>
</Pre>