jquery unendliches kaskadierendes Dropdown-Menü, einfaches Beispiel, Demonstration

Die Beispiele in diesem Artikel beschreiben den Code des JQuery-Infinite-Cascading-Dropdown-Menüs und die Implementierungsideen des JQuery-Infinite-Cascading-Dropdown-Menüs. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Endgültiges Rendering:

Da es kaskadiert ist, müssen die Daten in einer Baumstruktur vorliegen. Die Testdaten lauten hier wie folgt:

Sehen Sie sich das Rendering an:

1. Effektbild 1:

2. Effektbild zwei:

3. Effektbild drei:

Wie auf dem Bild zu sehen ist, ist die Anzahl der Dropdown-Boxen nicht fest codiert, sondern dynamisch geladen. Immer wenn sich die Auswahl des Dropdown-Felds ändert, wird eine Ajax-Anfrage gesendet und die Anforderung gibt erfolgreich Daten im JSON-Format zurück. Wenn die zurückgegebenen Daten nicht leer sind (dh wenn untergeordnete Knoten vorhanden sind), wird ein Dropdown-Feld angezeigt der Seite hinzugefügt werden. Wenn nicht, dann nicht hinzugefügt.

Der Implementierungscode des Plug-Ins lautet wie folgt:

(function ($) {
 $.fn.CascadingSelect = function (options) {

  //默认参数设置
  var settings = {
   url: "/Handler.ashx", //请求路径
   data: "0",    //初始值(字符串格式)
   split: ",",    //分割符
   cssName: "select",  //样式名称
   val: "id",    //<option value="id">name</option>
   text: "name",   //<option value="id">name</option>
   hiddenName: "selVal" //隐藏域的name属性的值
  }

  //合并参数
  if (options)
   $.extend(settings, options);


  //链式原则
  return this.each(function () {

   init($(this), settings.data);

   /*
   初始化
   @param container 容器对象
   @param data   初始值
   */
   function init(container, data) {

    //创建隐藏域对象,并赋初始值
    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++) {
     //创建下拉框
     createSelect(container, arr[i], arr[i + 1] || -1);
    }
   }


   /*
   创建下拉框
   @param container 容器对象
   @param parentid  父ID号
   @param id   自身ID号
   */
   function createSelect(container, parentid, id) {

    //创建select对象，并将select对象放入container内
    var _select = $("<select></select>").appendTo(container).addClass(settings.cssName);

    //如果parentid为空，则_parentid值为0
    var _parentid = parentid || 0;

    //发送AJAX请求,返回的data必须为json格式
    $.getJSON(settings.url, { parentid: _parentid }, function (data) {

     //添加子节点<option>
     addOptions(container, _select, data).val(id || -1)

    });
   }


   /*
   为下拉框添加<option>子节点
   @param container 容器对象
   @param select  下拉框对象
   @param data   子节点数据(要求数据为json格式)
   */
   function addOptions(container, select, data) {

    select.append($('<option value="-1">=请选择=</option>'));

    for (var i = 0; i < data.length; i++) {
     select.append($('<option value="' + data[i][settings.val] + '">' + data[i][settings.text] + '</option>'));
    }

    //为select绑定change事件
    select.bind("change", function () { _onchange(container, $(this), $(this).val()) });

    return select;
   }


   /*
   select的change事件函数
   @param container 容器对象
   @param select  下拉框对象
   @param id   当前下拉框的值
   */
   function _onchange(container, select, id) {

    var nextAll = select.nextAll("select");

    //如果当前select对象的值是空或-1（即：==请选择==），则将其后面的select对象全部移除
    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);

      //判断当前select对象后面是否跟有select对象
      if (nextAll.length < 1) {

       select.after(_select); //没有则直接添加

      } else {

       nextAll.remove(); //有则先移除再添加
       select.after(_select);
      }
     }
     else {
      nextAll.remove(); //没有子项则后面的select全部移除
     }
　　　　　　　　　　　 saveVal(container); //进行数据保存，此方法必须放在回调函数里面
    });

　　　　　　　　　//saveVal(container); //如果放在这里，则会出现bug

   }


   /*
   将选择的值保存在隐藏域中，用于表单提交保存
   @param container 容器对象
   */
   function saveVal(container) {

    var arr = new Array();
    arr.push(0); //为数组arr添加元素0，父节点从0开始，所以添加0

    $("select", container).each(function () {
     if ($(this).val() > 0) {
      arr.push($(this).val()); //获取container下每个select对象的值，并添加到数组arr
     }
    });

    //为隐藏域对象赋值
    $("input[name='" + settings.hiddenName + "']", container).val(arr.join(settings.split));
   }

  });
 }
})(jQuery);

Nach dem Login kopieren

Ich habe mein Bestes versucht, die Notizen im Detail zu schreiben, aber ich muss noch einige Wissenspunkte erläutern.

1. Meine Hintergrundsprache ist C#, daher sieht der Anforderungspfad so aus (URL: „/Handler.ashx“), Sie können andere verwenden. Es gibt keine Problem mit der Sprache, aber die über die Ajax-Anfrage zurückgegebenen Daten müssen im JSON-Format vorliegen.

2. In der Initialisierungsmethode init() fügen wir ein verstecktes Feld in den Container ein. Dieses versteckte Feld wird zum Speichern von Werten verwendet. Der Grund, warum wir ein verstecktes Feld hinzufügen müssen, liegt darin, dass die von uns ausgewählten Daten schließlich in der Datenbank gespeichert werden, sodass ein Formularübermittlungsvorgang stattfindet und wir ein verstecktes Feld hinzufügen.

3. Das Split-Trennzeichen in den Standardparametereinstellungen (Einstellungen). Hier wird das Komma (,) verwendet. Sie können auch andere verwenden, z. B. (-) oder (|). Es wird hauptsächlich zum Teilen und Kombinieren der Werte aller Dropdown-Boxen verwendet.

Die Aufteilung erfolgt hauptsächlich während der Initialisierung (Init). Der von Ihnen angegebene Anfangswert (Daten) ist beispielsweise nicht 0, sondern 0,1,4. Zu diesem Zeitpunkt wird die Aufteilung durchgeführt und das Dropdown-Feld erstellt Die Methode createSelect wird nacheinander ausgeführt ()

Bei der Kombination handelt es sich hauptsächlich um die Zuweisung von Werten zu ausgeblendeten Feldern, die Verwendung von Trennzeichen zum Zusammenfügen der Werte jedes Dropdown-Felds in eine Zeichenfolge und die anschließende Zuweisung zu ausgeblendeten Feldern.

4. {val: „id“, text: „name“ } in den Standardparametereinstellungen (Einstellungen). Sie entsprechen den entsprechenden Attributnamen im JSON-Objekt, das Sie zurückgeben.

5. Es gibt ein Problem beim Schreiben des Ausführungsorts von saveVal() in der _onchange()-Methode. Der Grund, warum beim Schreiben außerhalb der Callback-Funktion Fehler auftreten, liegt darin, dass $.getJSON() standardmäßig asynchron ist und die Methode saveVal() ausgeführt wird, bevor die Callback-Methode abgeschlossen ist. Werfen wir einen Blick darauf, wo der Fehler liegt:

Zu diesem Zeitpunkt ist der Wert des ausgeblendeten Feldes falsch und der korrekte Wert sollte 0,1,5 sein. Da die Rückruffunktion noch nicht ausgeführt wurde, d. h. wenn nextAll.remove() nicht ausgeführt wurde, wird saveVal()

ausgeführt.

Code des HTML-Teils der DEMO:

<html>
<head>
 <title></title>
 <style type="text/css">
  *{margin:0;padding:0;}
  #box{ width:500px; margin:100px auto;}
  .select{ width:120px; height:30px; margin-right:5px;}
 </style>
</head>
<body>
 <!--容器-->
 <div id="box"></div> 
 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="Scripts/jquery.similar.cascadingselect.js" type="text/javascript"></script>
 <script type="text/javascript">
  $("#box").CascadingSelect({data:"0,1,4"}); //设置初始值为0,1,4
 </script>
</body>
</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt von jquery, um den Effekt eines unendlich kaskadierenden Dropdown-Menüs zu erzielen. Ich hoffe, dass es für das Lernen aller hilfreich ist.

jquery unendliches kaskadierendes Dropdown-Menü, einfaches Beispiel, Demonstration_jquery