Jquery unlimited cascade drop-down menu simple example _ jquery

This article mainly recommends a simple example of jquery unlimited cascade drop-down menu, if you are interested, you can refer to the examples in this article to describe the jquery unlimited cascade drop-down menu code and jquery unlimited cascade drop-down menu Implementation ideas. Share it with you for your reference. The details are as follows:

Finally:

Because the data is cascade, the data must be in a tree structure. The test data here is as follows:

See:

1. I:

2. II:

3. 3:

The figure shows that the number of drop-down boxes is not written to death, but Dynamically Loaded. When the drop-down box is changed, an ajax request is sent, and the request returns json data successfully. When the returned data is not empty (that is, when a subnode exists ), A drop-down box is added to the page. If no drop-down box is added, no drop-down box is added.

The implementation code of the plug-in is as follows:

(Function ($) {$. fn. cascadingSelect = function (options) {// default parameter setting var settings = {url: "/Handler. ashx ", // Request Path data:" 0 ", // Initial Value (string format) split:", ", // delimiter cssName:" select ", // style name val: "id ",//NameText: "name ",//NameHiddenName: "selVal" // hide the value of the name attribute of the domain} // merge the parameter if (options) $. extend (settings, options); // chained principle return this. each (function () {init ($ (this), settings. data);/* initialize @ param container object @ param data Initial Value */function init (container, data) {// create a hidden domain object, and assign the initial value var _ input = $ (""). AppendTo (container ). val (settings. data); var arr = data. split (settings. split); for (var I = 0; I <arr. length; I ++) {// create the createSelect (container, arr [I], arr [I + 1] |-1 );}} /* Create a drop-down box @ param container object @ param parentid parent id @ param id */function createSelect (container, parentid, id) {// create a select object, and put the select object into the container var _ select = $ (""Maid (container).addclass(settings.css Name); // If parentid is null, The _ parentid value is 0 var _ parentid = parentid | 0; // send an AJAX request, the returned data must be in json format $. getJSON (settings. url, {parentid: _ parentid}, function (data) {// Add a subnodeAddOptions (container, _ select, data). val (id |-1)});}/* addSub-node @ param container object @ param select drop-down box object @ param data sub-node data (required data in json format) */function addOptions (container, select, data) {select. append ($ ('= Select ='); For (var I = 0; I <data. length; I ++) {select. append ($ (''+ Data [I] [settings. text] +'');} // Bind the select event to select. bind ("change", function () {_ onchange (container, $ (this), $ (this ). val ()}); return select ;} /* select's change event function @ param container object @ param select drop-down box object @ param id value of the current drop-down box */function _ onchange (container, select, id) {var nextAll = select. nextAll ("select"); // if the current select object value is null or-1 (I .e., select = ), remove all the select objects after it. if (! Id | id = "-1") {nextAll. remove () ;}$. getJSON (settings. url, {parentid: id}, function (data) {if (data. length> 0) {var _ html = $ (""); Var _ select = addOptions (container, _ html, data); // determines whether the select object is followed by the select object if (nextAll. length <1) {select. after (_ select); // if not, add} else {nextAll. remove (); // If yes, remove and then add select. after (_ select) ;}} else {nextAll. remove (); // if no subitem exists, all the select statements are removed.} saveVal (container); // Save the data. This method must be placed in the callback function }); // saveVal (container); // If put here, a bug will occur}/* Save the selected value in the hidden domain, used for form submission and saving @ param container object */function saveVal (container) {var arr = new Array (); arr. push (0); // Add element 0 to the array arr, and the parent node starts from 0, so add 0 $ ("select", container ). each (function () {if ($ (this ). val ()> 0) {arr. push ($ (this ). val (); // obtain the value of each select object under the container and add it to the array arr }}); // assign a value to the hidden domain object $ ("input [name = '" + settings. hiddenName + "']", container ). val (arr. join (settings. split) ;}};}} (jQuery );

I have tried to write a comment in detail, but I still want to explain some knowledge points.

1. Here I amThe background language uses C #,The request path you see is as follows (url: "/Handler. ashx "), you can use other languages, but the data returned by ajax requests must be in json format.

　　

2. In the initialization method init (), we put a hidden field into the container, which is used to store the value. We assign a value to it through a saveVal () method. The reason why we need to add hidden fields is that the selected data is finally saved to the database, so there will be form submission operations, so we need to add a hidden field.

　　

3. The split delimiter in the default parameter settings. Here, we use commas (,). You can also use other ones, such as (-) or (| ). It is mainly used to split and combine the values of all drop-down boxes.

Split is mainly during initialization (init). For example, if the initial value (data) you give is not 0, but 0, 1, 4, it will be split, run createSelect () to create a drop-down box one by one ()

A combination is used to concatenate the values in the drop-down boxes into a string and assign the values to the hidden fields.

4. {val: "id", text: "name"} in the default parameter settings "}. They correspond to the attribute names in the returned json object.

5. In the _ onchange () method, there is a problem about the saveVal () Execution location. A bug occurs outside the callback function because $. getJSON () is asynchronous by default. The saveVal () method is executed before the callback method is executed. Let's see the bug:

　　

At this time, the value of the hidden field is incorrect. The correct value should be 0, 1, and 5. The saveVal ()

Code of the Html part of the DEMO: