Category.js
$(function() {bindcategory ();})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> '); }} $selBigClass. Empty (). Append (Html.join ("). Change (function() {$txtCategory. val ( This. Value); $selThreeClass. Hide (); if( This. Value = = "" | | This. Value = = "0"{$selSmallClass. Hide (); return false; } $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> '); }} $selSmallClass. Empty (). Append (Html.join ("). Change (function() {$txtCategory. val ( This. Value); if( This. Value = = "" | | This. Value = = "0"{$selThreeClass. Hide (); $txtCategory. Val ($selBigClass. Val ()); return false; } vardata =JSON; $selThreeClass. Show (); varhtml = [' <option value= ' > Please select Small class </option> ']; for(varKeyinchdata) { if(Data[key].pid = = $ ("#selSmallClass")). Val ()) {Html.push (' <option value= ' + data[key].id + ' > ' + data[key].name + ' </option> '); }} $selThreeClass. Empty (). Append (Html.join ("). Change (function() {$txtCategory. val ( This. Value); if( This. Value = = "" | | This. Value = = "0"{$txtCategory. val ($selSmallClass. Val ()); } }); }); }); });};
Categoryjson.js (how to generate JSON data see: http://www.cnblogs.com/haozhenjie819/p/3601676.html)
1 [{"id": +, "name": "\U65B0\U95FB\U4E2D\U5FC3", "pid": 0, "Itemvalue": "|0|"}, {"id": Si, "name": "\u5173\u4e8e\u76df\ u53cb\u634c\u634c "," pid ": 0," Itemvalue ":" |0| "}, {" id ":," name ":" \u52a0\u76df\u5408\u4f5c "," pid ": 0," Itemvalue ": "|0|"}, {"id": +, "name": "\U5BA2\U670D\U670D\U52A1", "pid": 0, "Itemvalue": "|0|"}, {"id": $, "name": "\u4ea7\u54c 1\U670D\U52A1 "," pid ": 0," Itemvalue ":" |0| "},{" id ":," name ":" \u4f01\u4e1a\u6982\u51b5 "," pid ": Si," itemvalue ":" | |54| "}, {" id ": +," name ":" \u4f01\u4e1a\u6587\u5316 "," pid ": Si," itemvalue ":" |0|54| "}, {" id ": $," name ":" \u4f01\u 4e1a\u53d1\u5c55 "," pid ": Si," itemvalue ":" |0|54| "}, {" id ": +," name ":" \U8054\U7CFB\U6211\U4EEC "," pid ": Si," itemval UE ":" |0|54| "}, {" id ": $," name ":" \u52a0\u76df\u987b\u77e5 "," pid ":" Itemvalue ":" |0|59| "}, {" id ":" Max "," Name ":" \u52a0\u76df\u6d41\u7a0b "," pid ":" Itemvalue ":" |0|59| "}, {" id ": +," name ":" \U52A0\U76DF\U533A\U57DF "," pid ": 59, "Itemvalue": "|0|59|"}, {"id": $, "name": "\U67E5\U8BE2\U7535\U8BDD", "pid": "Itemvalue": "|0|64|"}, {"id": "$", "name": "\u670d\u52a1\u7f 51\u7edc "," pid ":" Itemvalue ":" |0|64| "}, {" id ":," name ":" \u5e38\u89c1\u95ee\u9898 "," pid ": +," Itemvalue ":" | |64| "}, {" id ":," name ":" \u6295\u8bc9\u5efa\u8bae "," pid ": +," Itemvalue ":" |0|64| "}, {" id ": +," name ":" \u63a8\u 8350\U670D\U52A1 "," pid ":" Itemvalue ":" |0|65| "}, {" id ":" \u8ba1\u8d39\u65b9\u5f0f "," pid ": +," itemval UE ":" |0|65| "}, {" id ":" \u7528\u6237\u987b\u77e5 "," pid ": +," Itemvalue ":" |0|65| "}, {" id ":" The "Name": " \u7981\u5bc4\u8303\u56f4 "," pid ":" Itemvalue ":" |0|65| "}, {" id ":", "" Name ":" \u666e\u901a\u5feb\u9012 "," pid ": 70, "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\u6 b3e "," pid ": Itemva,"Lue ":" |0|65|70| "}, {" id ": +," name ":" \U4FDD\U4EF7\U670D\U52A1 "," pid ": +," Itemvalue ":" |0|65|70| "}, {" id ":" n " Ame ":" \u4ee3\u7b7e\u56de\u5355 "," pid ": +," Itemvalue ":" |0|65|70| "}]
View Code
Html
<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" /></TD> </TR> </Table> </form> </Body></HTML>