According to the parameter Display category (three levels of association, JSON data is required ),

According to the parameter Display category (three levels of association, JSON data is required ),

Scripts/Category. js

Call method:

$ (Function () {BindCategory (); // BindCategoryData ($ ("# txtCategoryId"). val () by default, BindCategory ());})View Code

Binding three levels of linkage (see: http://www.cnblogs.com/haozhenjie819/p/3887279.html for details)

Function BindCategory () {var $ txtCategory = $ ("# txtCategoryId"); var _ selectId = ["selBigClass", "selSmallClass", "selThreeClass"]; for (var I = 0; I <_ selectId. length; I ++) {var select = 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) {var html = ['<option value =" "> select a Category </option>']; for (var key in json) {if (json [key]. pid = 0) {html. push ('<option value = "' + json [key]. id + '">' + json [key]. name + '</option>') ;}// Level 1 class $ selBigClass. empty (). append (html. join ('')). change (function () {$ txtCategory. val (this. value); $ selThreeClass. hide (); $ selSmallClass. show (); var html = ['<option value = ""> select a small class </option>']; for (var data in json) {if (json [data]. pid ==$ ("# selBigClass "). val () {html. push ('<option value = "' + json [data]. id + '">' + json [data]. name + '</option>') ;}// Level 2 class $ selSmallClass. empty (). append (html. join ('')). change (function () {$ txtCategory. val (this. value); $ selThreeClass. show (); var html = ['<option value = ""> select a small class </option>']; for (var data in json) {if (json [data]. pid ==$ selSmallClass. val () {html. push ('<option value = "' + json [data]. id + '">' + json [data]. name + '</option>') ;}// Level 3 category $ selThreeClass. empty (). append (html. join ('')). change (function () {$ txtCategory. val (this. value) ;}); // if no third-level category exists, hide the third-level category control if ($ selThreeClass. get (0 ). options. length <= 1) {$ selThreeClass. hide (); return false ;}}); // hide the second-level class control if ($ selSmallClass. get (0 ). options. length <= 1) {$ selSmallClass. hide (); return false ;}});});};View Code

Display default values based on parameters

Var setBigClassTime; // BindCategoryData (CategoryId) {if (document. getElementById ("selBigClass") = null | document. getElementById ("selBigClass "). length <= 0) setBigClassTime = setTimeout ("BindCategoryData ('" + CategoryId + "')", 200); else clearTimeout (setBigClassTime); $. getJSON ('/Scripts/CategoryJson. js', function (json) {for (var key in json) {if (json [key]. id = CategoryId) {js On [key]. id = CategoryId; var str = 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 (for how to generate json data, see: http://www.cnblogs.com/haozhenjie819/p/3601676.html)

[{"Id": 31, "name": "\ u65b0 \ u95fb \ u4e2d \ u5fc3", "pid": 0, "itemvalue": "| 0 | "}, {"id": 59, "name": "\ u52a0 \ u76df \ u5408 \ u4f5c", "pid": 0, "itemvalue": "| 0 | "}, {"id": 65, "name": "\ u4ea7 \ u54c1 \ u670d \ u52a1", "pid": 0, "itemvalue": "| 0 | "}, {"id": 60, "name": "\ u52a0 \ u76df \ u987b \ u77e5", "pid": 59, "itemvalue ": "| 0 | 59 |" },{ "id": 61, "name": "\ u52a0 \ u76df \ u6d41 \ u7a0b", "pid": 59, "itemvalue": "| 0 | 59 |" },{ "id": 62, "name": "\ u52a0 \ u76df \ u533a \ u57df", "pid ": 59, "itemvalue": "| 0 | 59 |"}, {"id": 70, "name": "\ u63a8 \ u8350 \ u670d \ u52a1 ", "pid": 65, "itemvalue": "| 0 | 65 |" },{ "id": 71, "name ": "\ u8ba1 \ u8d39 \ u65b9 \ u5f0f", "pid": 65, "itemvalue": "| 0 | 65 |" },{ "id": 72, "name": "\ u7528 \ u6237 \ u987b \ u77e5", "pid": 65, "itemvalue": "| 0 | 65 |" },{ "id ": 73, "name": "\ u7981 \ u5bc4 \ u8303 \ u56f4", "pid": 65, "itemvalue": "| 0 | 65 | "}, {"id": 75, "name": "\ u666e \ u901a \ u5feb \ u9012", "pid": 70, "itemvalue ": "| 0 | 65 | 70 |" },{ "id": 76, "name": "\ u7279 \ u79cd \ u5feb \ u4ef6", "pid": 70, "itemvalue": "| 0 | 65 | 70 |"}, {"id": 77, "name": "\ u9650 \ u65f6 \ u6d3e \ u9001 ", "pid": 70, "itemvalue": "| 0 | 65 | 70 |" },{ "id": 78, "name ": "\ u4ee3 \ u6536 \ u8d37 \ u6b3e", "pid": 70, "itemvalue": "| 0 | 65 | 70 |" },{ "id": 79, "name": "\ u4fdd \ u4ef7 \ u670d \ u52a1", "pid": 70, "itemvalue": "| 0 | 65 | 70 | "}, {"id": 80, "name": "\ u4ee3 \ u7b7e \ u56de \ u5355", "pid": 70, "itemvalue ": "| 0 | 65 | 70 |"}]View Code

Web page (assign a value to hidden and the category number is 75)

<Html xmlns = "http://www.w3.org/1999/xhtml"> 

 
 

 
 
 
 
 
Knowledge points involved: [JavaScript split () method] the return value is a string array.