Scripts/category.js
Call Method:
$ (function () { bindcategory (); // the value in the default bound text box Bindcategorydata ($ ("#txtCategoryId"). Val ());})
View Code
Binding level Three linkage (details see: http://www.cnblogs.com/haozhenjie819/p/3887279.html)
functionbindcategory () {var$txtCategory = $ ("#txtCategoryId"); var_selectid = ["Selbigclass", "Selsmallclass", "Selthreeclass"]; for(vari = 0; i < _selectid.length; i++) { varselect = Document.createelement ("select"); Select.id=_selectid[i]; Select.name=_selectid[i]; $txtCategory. Parent (). append (select); } var$selBigClass = $ ("#selBigClass"); var$selSmallClass = $ ("#selSmallClass"); var$selThreeClass = $ ("#selThreeClass"); $selSmallClass. Hide (); $selThreeClass. Hide (); $.getjson ("/scripts/categoryjson.js",function(JSON) {varhtml = [' <option value= ' > Please select Category </option> ']; for(varKeyinchJSON) { if(Json[key].pid = = 0) {Html.push (' <option value= ' + json[key].id + ' > ' + json[key].name + ' </option> '); } } //First level category$selBigClass. Empty (). Append (Html.join (")). Change (function() {$txtCategory. val ( This. Value); $selThreeClass. Hide (); $selSmallClass. Show (); varhtml = [' <option value= ' > Please select Small class </option> ']; for(varDatainchJSON) { if(Json[data].pid = = $ ("#selBigClass")). Val ()) {Html.push (' <option value= ' + json[data].id + ' > ' + json[data].name + ' </option> '); } } //Second level category$selSmallClass. Empty (). Append (Html.join (")). Change (function() {$txtCategory. val ( This. Value); $selThreeClass. Show (); varhtml = [' <option value= ' > Please select Small class </option> ']; for(varDatainchJSON) { if(Json[data].pid = =$selSmallClass. Val ()) {Html.push (' <option value= ' + json[data].id + ' > ' + json[data].name + ' </option> '); } } //Third level category$selThreeClass. Empty (). Append (Html.join (")). Change (function() {$txtCategory. val ( This. Value); }); //Hide third-level category controls if no third-level category exists if($selThreeClass. Get (0). options.length <= 1{$selThreeClass. Hide (); return false; } }); //hides the second-level category control if no second-level category exists if($selSmallClass. Get (0). options.length <= 1{$selSmallClass. Hide (); return false; } }); });};
View Code
Show default values based on parameters
varSetbigclasstime;//binding DatafunctionBindcategorydata (CategoryId) {if(document.getElementById ("selbigclass") = =NULL|| document.getElementById ("Selbigclass"). Length <= 0) Setbigclasstime= SetTimeout ("Bindcategorydata ('" + CategoryId + "')", 200); Elsecleartimeout (setbigclasstime); $.getjson ('/scripts/categoryjson.js ',function(JSON) { for(varKeyinchJSON) { if(Json[key].id = =CategoryId) {Json[key].id=CategoryId; varstr =Json[key].itemvalue; var_p = Str.split ("|") [2]; var_c =Json[key].pid; if(_p = =_c) { if(_p! = "") { $("#selBigClass"). Val (_p). Change (); $("#selSmallClass"). Val (CategoryId); } Else { $("#selBigClass"). Val (CategoryId); } } Else { $("#selBigClass"). Val (_p). Change (); $("#selSmallClass"). Val (_c). Change (); $("#selThreeClass"). Val (CategoryId). Change (); } } } });}
Scripts/categoryjson.js (how to generate JSON data see: http://www.cnblogs.com/haozhenjie819/p/3601676.html)
[{"id": +, "name": "\U65B0\U95FB\U4E2D\U5FC3", "pid": 0, "Itemvalue": "|0|" },{ "id": "Name": "\u52a0\u76df\u5408\u4f5c", "pid": 0, "Itemvalue": "|0|" },{ "id": +, "name": "\U4EA7\U54C1\U670D\U52A1", "pid": 0, "Itemvalue": "|0|" },{ "id": "Name": "\u52a0\u76df\u987b\u77e5", "pid": "Itemvalue": "|0|59|" },{ "id": "," "Name": "\u52a0\u76df\u6d41\u7a0b", "pid": "Itemvalue": "|0|59|" },{ "id": "Name": "\U52A0\U76DF\U533A\U57DF", "pid": "Itemvalue": "|0|59|" },{ "id": +, "name": "\U63A8\U8350\U670D\U52A1", "pid": $, "Itemvalue": "|0|65|" },{ "id": "Name": "\u8ba1\u8d39\u65b9\u5f0f", "pid": "Itemvalue": "|0|65|" },{ "id": "Name": "\u7528\u6237\u987b\u77e5", "pid": "Itemvalue": "|0|65|" },{ "id": "," "Name": "\u7981\u5bc4\u8303\u56f4", "pid": "Itemvalue": "|0|65|" },{ "id": "Name": "\u666e\u901a\u5feb\u9012", "pid": +, "Itemvalue": "|0|65|70|" },{ "id": "Name": "\u7279\u79cd\u5feb\u4ef6", "pid": "Itemvalue": "|0|65|70|" },{ "id": "Name": "\u9650\u65f6\u6d3e\u9001", "pid": "Itemvalue": "|0|65|70|" },{ "id": +, "name": "\u4ee3\u6536\u8d37\u6b3e", "pid": +, "Itemvalue": "|0|65|70|" },{ "id": +, "name": "\U4FDD\U4EF7\U670D\U52A1", "pid": "Itemvalue": "|0|65|70|" }, { "id": "Name": "\u4ee3\u7b7e\u56de\u5355", "pid": +, "Itemvalue": "|0|65|70|"}]
View Code
Web page (assign a value to hidden, category number 75)
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Headrunat= "Server"> <title>Three-level linkage</title> <Scriptsrc= "/scripts/jquery-1.4.1.min.js"type= "Text/javascript"></Script> <Scriptsrc= "/scripts/category.js"type= "Text/javascript"></Script> </Head><Body> <formID= "Form1"runat= "Server"> <Table> <TR> <TD>News Category:</TD> <TD> <inputID= "Txtcategoryid"name= "Txtcategoryid"type= "hidden"runat= "Server"value= " the" /></TD> </TR> </Table> </form> </Body></HTML>
Knowledge points involved: the "JavaScript Split () method" return value is an array of strings.