JS package Three-Level linkage menu (use only one line of JS code) _JAVASCRIPT Skills

Objective

In the actual project development, we often need three-level linkage, such as provincial urban choice, commodity category three classification of choice and so on.

But the internet can not find a complete code, powerful, using a simple three-level linkage menu, mostly just a simple talk about the realization of ideas.

Here's a list of three cascading code that I've encapsulated in my work and used in my project, and I'd like to welcome you to the wrong place.

Simple to use (one line of code only)

You can set whether or not to display the Please select item as needed

Support Callback (triggers callback event after completion of class three loading)

Supports multiple cascading menus for one page

Demo Effect preview:

Three-level linkage package

Principle: Combine Selec tags and related HTML code with JS array objects.

JS is as follows:

All the code is as follows:

Level three category selector by Wang Junhua 20160721 var wjh_category = {category1id: "Wjh_category1_select", Category2id: "Wjh_category2_selec T ", Category3id:" Wjh_category3_select ", Dataurl:"/public/getproductcategorys ",//Data URL//initialization//wrapid: Parcel level Three classification of the standard Check ID//category1: Province ID corresponds to value//category2: City ID corresponds to value//category3: County ID corresponds to value//useempty: Support Please select, if False The default level three is loaded//successcallback: The callback function after loading completes init:function (Wrapid, Category1, Category2, Category3, Useempty, Successcallbac
    k) {Wjh_category.inittag (wrapid, useempty);
    Wjh_category.initdata (Category1, Category2, Category3, Useempty, Successcallback);
    Wjh_category.category1select (Useempty);
  Wjh_category.category2select (Useempty);
    },//Initialize label inittag:function (wrapid, useempty) {var tmpinit = "";
    Tmpinit + = "<span class= ' wjh_category1_span ' > Classification:</span>"; if (useempty) {tmpinit + = "<select id= '" + wjh_category.category1id + "' name= '" + wjh_category.category1id + "' ><Option value= ' 0 ' >--please select--</option></select> "; else {tmpinit + = "<select id= '" + wjh_category.category1id + "' name= '" + wjh_category.category1id + "' >&lt
    ;/select> ";
    } Tmpinit + = "<span class= ' Wjh_category2_span ' > Level two classification:</span>"; if (useempty) {tmpinit + = "<select id= '" + wjh_category.category2id + "' name= '" + wjh_category.category2id + "'
    ><option value= ' 0 ' >--please choose--</option></select> "; else {tmpinit + = "<select id= '" + wjh_category.category2id + "' name= '" + wjh_category.category2id + "' >&lt
    ;/select> ";
    } Tmpinit + = "<span class= ' Wjh_category3_span ' > Level three classification:</span>"; if (useempty) {tmpinit + = "<select id= '" + wjh_category.category3id + "' name= '" + wjh_category.category3id + "'
    ><option value= ' 0 ' >--please choose--</option></select> "; else {tmpinit + = "<select id= '" + wjh_category.category3id + "' name= '" + wjh_category.catEgory3id + "' ></select>";
  } $ ("#" + Wrapid + ""). html (tmpinit);
    },//initialization data-including modifying Initdata:function (Incategory1, Incategory2, Incategory3, Useempty, successcallback) {//Add if (Incategory1 = = 0) {$.get (Wjh_category.dataurl, {}, function (Category1) {var firstcategory1guid = Cate Gory1[0].
        Value; Initializes the first level category for (var i = 0; i < category1.length i++) {var tmp_option = "<option value=" + categ Ory1[i]. Value + "' >" + category1[i].
          Display + "</option>";
        $ ("#" + Wjh_category.category1id + ""). HTML ($ ("#" + Wjh_category.category1id + ""). html () + tmp_option);
          } if (Useempty) {successcallback ();
        Return }//Initialize level two classification $.get (Wjh_category.dataurl, {pid:firstcategory1guid}, function (Category2) {var Firstcategory2guid = category2[0].
          Value; for (var i = 0; i < category2.length i++) {var tmp_option = "Option value= ' "+ category2[i]. Value + "' >" + category2[i].
            Display + "</option>";
          $ ("#" + Wjh_category.category2id + ""). HTML ($ ("#" + Wjh_category.category2id + ""). html () + tmp_option); }//Initialize county $.get (Wjh_category.dataurl, {pid:firstcategory2guid}, function (Category3) {f or (var i = 0; i < category3.length i++) {var tmp_option = "<option value= '" + category3[i]. Value + "' >" + category3[i].
              Display + "</option>";
            $ ("#" + Wjh_category.category3id + ""). HTML ($ ("#" + Wjh_category.category3id + ""). html () + tmp_option);
          } successcallback ();
        }, "JSON");
      }, "JSON");
    }, "JSON"); }//Modify else {$.get (Wjh_category.dataurl, {}, function (Category1) {//Initialize first level classification for (Var i = 0; i < category1.length;
          i++) {var tmp_option = ""; if (category1[i). Value = = incategory1) {tmp_option = "<option selected= ' selected ' value= '" + category1[i]. Value + "' >" + category1[i].
          Display + "</option>"; else {tmp_option = "<option value= '" + category1[i]. Value + "' >" + category1[i].
          Display + "</option>";
        $ ("#" + Wjh_category.category1id + ""). HTML ($ ("#" + Wjh_category.category1id + ""). html () + tmp_option); }//Initialize level two classification $.get (Wjh_category.dataurl, {pid:incategory1}, function (Category2) {for (VA R i = 0; i < category2.length;
            i++) {var tmp_option = ""; if (category2[i). Value = = Incategory2) {tmp_option = "<option selected= ' selected ' value= '" + category2[i]. Value + "' >" + category2[i].
            Display + "</option>"; else {tmp_option = "<option value= '" + category2[i]. Value + "' >" + category2[i].
            Display + "</option>"; } $ ("#" + Wjh_category.category2id + ""). HTML ($ ("#" + Wjh_category.category2id + ""). html () + tmp_option); }//Initialize level three classification $.get (Wjh_category.dataurl, {Pid:incategory2}, function (Category3) {for ( var i = 0; i < category3.length;
              i++) {var tmp_option = ""; if (category3[i). Value = = incategory3) {tmp_option = "<option selected= ' selected ' value= '" + category3[i]. Value + "' >" + category3[i].
              Display + "</option>"; else {tmp_option = "<option value= '" + category3[i]. Value + "' >" + category3[i].
              Display + "</option>";
            $ ("#" + Wjh_category.category3id + ""). HTML ($ ("#" + Wjh_category.category3id + ""). html () + tmp_option);
          } successcallback ();
        }, "JSON");
      });
    }); },//First level category change Category1select:function (useempty) {$ ("#" + Wjh_category.category1id + ""). Change (function () {var optionhtml = "";
      if (useempty) {optionhtml = "<option value= ' 0 ' >--please select--</option>";
      } $ ("#" + Wjh_category.category2id + ""). html (optionhtml);
      $ ("#" + Wjh_category.category3id + ""). html (optionhtml);
      var tmpSelectedcategory1 = $ ("#" + wjh_category.category1id + "option:selected"). Val (); Initialize level two classification $.get (Wjh_category.dataurl, {pid:tmpselectedcategory1}, function (Category2) {var Firstcategor Y2guid = category2[0].
        Value; for (var i = 0; i < category2.length i++) {var tmp_option = "<option value= '" + category2[i]. Value + "' >" + category2[i].
          Display + "</option>";
        $ ("#" + Wjh_category.category2id + ""). HTML ($ ("#" + Wjh_category.category2id + ""). html () + tmp_option);
        } if (Useempty) {return; }//Initialize level three classification $.get (Wjh_category.dataurl, {pid:firstcategory2guid}, function (Category3) {for (var i = 0; i < Category3.lengtH i++) {var tmp_option = "<option value= '" + category3[i]. Value + "' >" + category3[i].
            Display + "</option>";
          $ ("#" + Wjh_category.category3id + ""). HTML ($ ("#" + Wjh_category.category3id + ""). html () + tmp_option);
      }}, "JSON");
    }, "JSON");
  }); 
      },//Two classification change category2select:function (useempty) {$ ("#" + Wjh_category.category2id + ""). Change (function () {
      var optionhtml = "";
      if (useempty) {optionhtml = "<option value= ' 0 ' >--please select--</option>";
      } $ ("#" + Wjh_category.category3id + ""). html (optionhtml);
      var TmpSelectedcategory2 = $ ("#" + wjh_category.category2id + "option:selected"). Val (); Initialize level three classification $.get (Wjh_category.dataurl, {Pid:tmpselectedcategory2}, function (Category3) {for (var i = 0; i < category3.length; i++) {var tmp_option = "<option value= '" + category3[i]. Value + "' >" + category3[i]. Display + "</option> ";
        $ ("#" + Wjh_category.category3id + ""). HTML ($ ("#" + Wjh_category.category3id + ""). html () + tmp_option);
    }}, "JSON");
  }); }
};

Three-level linkage use Demo

This plugin relies on jquery, before use, please introduce jquery files on the page

First define a demo page as follows: Div1,div2 is used to wrap the generated linkage menu.

<! DOCTYPE html>
 
 

1. Add mode with "Please select"

The demo effect is as follows:

2. Add mode without "please select"

The demo effect is as follows:

3. With "Please select" Modify mode

Assign a default value when initializing a level three cascade menu (scenario: Modifying the user's receipt address, modifying the product's three-level classification)

The demo effect is as follows:

4. Do not have "Please select" Modify mode

The demo effect is as follows:

5. Modify the name and ID of the Select

The results are as follows:

6. Modify the URL to get the data

7. Support Callback Functions

The benefit of supporting callback functions is to trigger the callback function after the three-level linkage menu data is loaded. This can solve the problem is: the HTML load when the use of the data in the Linkage menu to do some special operations, such as: When the page is loaded according to the three-level linkage menu data value to the server query data.

8. Multiple cascading menus for a page

It is important to note that if a page is made up of the same three-level linkage menu, it must be renamed to the Select of level three linkage menu.

Note the following sentence ***************

The three-level operation, which is encapsulated above, is simpler to use, but does not support the display of multiple cascading menus on one page, so I make changes to the original code (changed to a closure object) to support multiple cascading menus for one page. But there is one more line of code on the operation. Use roughly the same

Code preview:

The modified JS code is as follows:

Level three category selector by Wang Junhua 20160721 function Wjh_category_plus () {this.
Category1id= "Wjh_category1_select"; This.
Category2id = "Wjh_category2_select"; This.
Category3id = "Wjh_category3_select"; This. Dataurl = "/public/getproductcategorys";//Data URL//initialization//wrapid: Tag ID for parcel Level three category//category1: Province ID corresponds to Value//category2: City ID pair Should value//CATEGORY3: County ID corresponds to value//useempty: Do you want to support please select, if False then the default three levels are loaded//successcallback: This is the callback function after the completion of the load. Init = function (Wrapid, Category1, Category2, Category3, Useempty, Successcallback) {this.
Inittag (Wrapid, useempty); This.
InitData (Category1, Category2, Category3, Useempty, Successcallback);
This.category1select (Useempty);
This.category2select (Useempty);
}; Initialize label this.
Inittag = function (Wrapid, useempty) {var tmpinit = "";
Tmpinit + = "<span class= ' wjh_category1_span ' > Classification:</span>"; if (useempty) {tmpinit + = "<select id= '" + this. Category1id + "' name= '" + this.
Category1id + "' ><option value= ' 0 ' >--please choose--</option></select>";
} else {Tmpinit + = "<select id= '" + this. Category1id + "' name= '" + this.
Category1id + "' ></select>";
} Tmpinit + = "<span class= ' Wjh_category2_span ' > Level two classification:</span>"; if (useempty) {tmpinit + = "<select id= '" + this. Category2id + "' name= '" + this.
Category2id + "' ><option value= ' 0 ' >--please choose--</option></select>"; else {tmpinit + = "<select id= '" + this. Category2id + "' name= '" + this.
Category2id + "' ></select>";
} Tmpinit + = "<span class= ' Wjh_category3_span ' > Level three classification:</span>"; if (useempty) {tmpinit + = "<select id= '" + this. Category3id + "' name= '" + this.
Category3id + "' ><option value= ' 0 ' >--please choose--</option></select>"; else {tmpinit + = "<select id= '" + this. Category3id + "' name= '" + this.
Category3id + "' ></select>";
} $ ("#" + Wrapid + ""). html (tmpinit); Initialize data-including modifying this. InitData = function (Incategory1, Incategory2, Incategory3, Useempty, Successcallback) {var C1 = this.
Category1id; VarC2 = this.
Category2id; var C3 = this.
Category3id; var Dataurl = this.
Dataurl; Add if (incategory1 = 0) {$.get (Dataurl, {}, function (Category1) {var firstcategory1guid = category1[0].
Value; Initializes the first level category for (var i = 0; i < category1.length i++) {var tmp_option = "<option value= '" + category1[i]. Value + "' >" + category1[i].
Display + "</option>";
$ ("#" + C1 + ""). HTML ($ ("#" + C1 + ""). html () + tmp_option);
if (useempty) {successcallback (); return;}//Initialize level two classification $.get (Dataurl, {pid:firstcategory1guid}, function (Category2) { var firstcategory2guid = category2[0].
Value; for (var i = 0; i < category2.length i++) {var tmp_option = "<option value= '" + category2[i]. Value + "' >" + category2[i].
Display + "</option>";
$ ("#" + C2 + ""). HTML ($ ("#" + C2 + ""). html () + tmp_option);
Initialize County $.get (Dataurl, {pid:firstcategory2guid}, function (Category3) {for (var i = 0; i < category3.length; i++) { var tmp_option = "<option value=" + category3[i]. VaLue + "' >" + category3[i].
Display + "</option>";
$ ("#" + C3 + ""). HTML ($ ("#" + C3 + ""). html () + tmp_option);
Successcallback ();
}, "JSON");
}, "JSON");
}, "JSON"); }//Modify else {$.get (Dataurl, {}, function (Category1) {//Initialize first level classification for (var i = 0; i < category1.length; i++) {var tmp_
option = ""; if (category1[i). Value = = incategory1) {tmp_option = "<option selected= ' selected ' value= '" + category1[i]. Value + "' >" + category1[i].
Display + "</option>"; else {tmp_option = "<option value= '" + category1[i]. Value + "' >" + category1[i].
Display + "</option>";
$ ("#" + C1 + ""). HTML ($ ("#" + C1 + ""). html () + tmp_option); Initialize level two classification $.get (Dataurl, {pid:incategory1}, function (Category2) {for (var i = 0; i < category2.length; i++) {var
Tmp_option = ""; if (category2[i). Value = = Incategory2) {tmp_option = "<option selected= ' selected ' value= '" + category2[i]. Value + "' >" + category2[i].
Display + "</option>"; else {tmp_option = "<option value= ' "+ category2[i]. Value + "' >" + category2[i].
Display + "</option>";
$ ("#" + c2+ ""). HTML ($ ("#" + C2 + ""). html () + tmp_option); Initialize level three classification $.get (Dataurl, {Pid:incategory2}, function (Category3) {for (var i = 0; i < category3.length; i++) {var
Tmp_option = ""; if (category3[i). Value = = incategory3) {tmp_option = "<option selected= ' selected ' value= '" + category3[i]. Value + "' >" + category3[i].
Display + "</option>"; else {tmp_option = "<option value= '" + category3[i]. Value + "' >" + category3[i].
Display + "</option>";
$ ("#" + C3 + ""). HTML ($ ("#" + C3 + ""). html () + tmp_option);
Successcallback ();
}, "JSON");
});
});
}
}; First level category Change This.category1select = function (useempty) {var C1 = this.
Category1id; var C2 = this.
Category2id; var C3 = this.
Category3id; var Dataurl = this.
Dataurl;
$ ("#" + C1 + ""). Change (function () {var optionhtml = ""; if (useempty) {optionhtml = "<option value= ' 0 ' >--please select--</option>";
} $ ("#" + c2+ ""). html (optionhtml);
$ ("#" + C3 + ""). html (optionhtml);
var tmpSelectedcategory1 = $ ("#" + C1 + "option:selected"). Val (); Initialize level two classification $.get (Dataurl, {pid:tmpselectedcategory1}, function (Category2) {var firstcategory2guid = category2[0].
Value; for (var i = 0; i < category2.length i++) {var tmp_option = "<option value= '" + category2[i]. Value + "' >" + category2[i].
Display + "</option>";
$ ("#" + C2 + ""). HTML ($ ("#" +c2+ ""). html () + tmp_option); if (useempty) {return;}//Initialize level three classification $.get (Dataurl, {pid:firstcategory2guid}, function (Category3) {for (var i = 0; I & Lt Category3.length; i++) {var tmp_option = "<option value= '" + category3[i]. Value + "' >" + category3[i].
Display + "</option>";
$ ("#" + C3 + ""). HTML ($ ("#" + C3 + ""). html () + tmp_option);}}, "JSON";}, "JSON"); Level two category Change This.category2select = function (useempty) {var C1 = this.
Category1id; var C2 = this.
Category2id; var C3 = this.
Category3id; var dataurl = tHis.
Dataurl;
$ ("#" + C2 + ""). Change (function () {var optionhtml = "";
if (useempty) {optionhtml = "<option value= ' 0 ' >--please select--</option>";} $ ("#" + c3+ ""). html (optionhtml); var TmpSelectedcategory2 = $ ("#" + this.)
Category2id + "option:selected"). Val (); Initialize level three classification $.get (Dataurl, {Pid:tmpselectedcategory2}, function (Category3) {for (var i = 0; i < category3.length; i+ +) {var tmp_option = ' <option value= ' + category3[i]. Value + "' >" + category3[i].
Display + "</option>"; $ ("#" +C3 + ""). HTML ($ ("#" + c3+ ""). html () + tmp_option);}}, "JSON";});}

Use the following:

Code:

Demonstrate:

The above is a small set of JS package to introduce the three-level linkage menu (use only one line of JS code), hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!