jquery Infinite cascading drop-down Menu Simple Example Demo _jquery

This article is an example of the jquery infinite Cascade pull-down Menu code and the jquery infinite cascade drop-down menu implementation ideas. Share to everyone for your reference. Specifically as follows:

Final Effect Diagram:

Because it is cascading, the data must be tree-structured, and the test data here are as follows:

Look at the effect chart:

1, the effect chart one:

2, the effect figure two:

3, effect figure three:

From the diagram, the number of Drop-down boxes is not written dead, but dynamically loaded. Whenever the dropdown box chooses to change, it sends an AJAX request that returns the JSON-formatted data successfully, and when the returned data is not empty (that is, when there are child nodes), a drop-down box is added to the page, and none is added.

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

(function ($) {$.fn. Cascadingselect = function (options) {//default parameter set var settings = {URL: "/handler.ashx",//Request path data: "0",//Initial Start value (string format) split: ",",///Separator Cssname: "Select",//Style name val: "id",//<option value= "id" >name</optio N> text: "Name",//<option value= "id" >name</option> hiddenname: "Selval"//hidden field's Name property's value}//merge


  parameter if (options) $.extend (settings, options);

   Chained principle return This.each (function () {init ($ (this), settings.data);
    /* Initialize @param container container object @param data Initial value/function init (container, data) {//Create a hidden domain object and assign an initial value var _input = $ ("<input type= ' hidden ' name= '" + settings.hiddenname + "'/>"). Appendto (Container). Val (settings.data

    );
    var arr = data.split (settings.split);
    for (var i = 0; i < arr.length i++) {//Create Drop-down box Createselect (container, arr[i], Arr[i + 1] | |-1); }/* Create a Drop-down box @param container container object @param parentid Parent ID @param ID itself ID number */function Createselect (container, ParentID, id) {//Create a Select object and put a select object into container

    var _select = $ ("<select></select>"). Appendto (Container). addclass (Settings.cssname); If ParentID is empty, the _parentid value is 0 var _parentid = ParentID | |

    0; To send an AJAX request, the returned data must be JSON format $.getjson (Settings.url, {parentid: _parentid}, function (data) {//Add child nodes <option
   > AddOptions (Container, _select, data). val (id | |-1)});
   /* Add <option> child node to drop-down box @param container container object @param select Drop-down Box object @param data child node (required data in JSON format) /function AddOptions (container, select, data) {Select.append ($ (' <option value= '-1 ">= Please select =</option&gt

    ;')); for (var i = 0; i < data.length i++) {select.append ($ (' <option value= "' + data[i][settings.val] + '" > ' + D
    Ata[i][settings.text] + ' </option> '); //Is the Select Bind Change Event select.bind ("Change", function () {_onchange) (contAiner, $ (this), $ (this). val ())};
   return select; }/* Select's Change event function @param container container object @param select Drop-down Box object @param ID current Drop-down Box value/Function _

    onchange (container, select, id) {var nextall = Select.nextall ("select");
    If the value of the current select object is empty or-1 (that is, = = = Select = =), remove all subsequent Select objects from if (!id | | | id = = "-1") {nextall.remove (); } $.getjson (Settings.url, {parentid:id}, function (data) {if (Data.length > 0) {var _html = $ ("
      ; Select class= ' "+ settings.cssname +" ' ></select> ");

      var _select = addoptions (container, _html, data);

       Determines whether the current select object is followed by a Select Object if (Nextall.length < 1) {select.after (_select);//No, add directly} else { Nextall.remove ();
      The first is removed and then added Select.after (_select); } ' else {nextall.remove ();//////////////////////Saveval (container) is removed after all;

　　　　　　　　　For data preservation, this method must be placed inside the callback function}. Saveval (container);

If placed here, there will be a bug   /* To save the selected value in a hidden field for form submission Save @param container container object/function Saveval (container) {var arr = new A
    Rray (); Arr.push (0); add element 0 to the array arr the parent node starts at 0, so add 0 $ ("select", Container). each (function () {if ($ (). Val () > 0) {arr.push ($ (this). Val ());

    Gets the value of each Select object under container and adds to the array arr}});
   Assigns values to hidden Field objects $ ("input[name=" + Settings.hiddenname + "']", container). Val (Arr.join (Settings.split));
 }

  });

 }) (JQuery);

Note I've tried to write as much detail as I could, but I still need to explain some of the knowledge points.

1, I am here in the background language is C #, so you see the request path is such (URL: "/handler.ashx"), you have no problem with other languages, but the data returned through AJAX request must be in JSON format data.

　　

2. In the initialization method init (), we put a hidden field in the container, which is used to store the value, and we assign it to it by a saveval () method. The reason to add a hidden field is because the data we choose is ultimately saved to the database, so there will be a form submission operation, so add a hidden field.

　　

3, the default parameter setting (settings) inside of the split split character. Here is a comma (,) you can also use the other, such as (-) or (|). It is primarily used to split and combine the values of all drop-down boxes.

Split is primarily in initialization (INIT), such as you give the initial value (data) is not 0, but 0,1,4 will then split it, the execution of the Create Drop-down box method Createselect ()

The combination is mainly when assigning values to hidden fields, using a separator to stitch the values of each Drop-down box into a string and then assign to a hidden field.

4. {val: "id", Text: "Name"} in the default parameter settings (settings). They correspond to the corresponding property names in the JSON object you are returning.

5, in the _onchange () method has written to Saveval () the execution location of the problem. A bug is written outside the callback function because $.getjson () is asynchronous by default and executes the Saveval () method when the callback method has not finished executing. Let's see where the bugs are:

　　

The value of the hidden field is wrong and the correct value should be 0,1,5. Since the callback function has not been executed, that is, the Nextall.remove () has not been executed, it is executed Saveval ()

Code for the HTML part of the demo:

The above is the full range of jquery implementation of the infinite cascading drop-down menu effect, I hope to help you learn.