Display categories according to parameters (three-level linkage, JSON data required)

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.