jquery無(wú)限級(jí)聯(lián)下拉菜單簡(jiǎn)單實(shí)例演示

更新時(shí)間：2015年11月23日 16:06:07 作者：similar

這篇文章主要向大家推薦了一個(gè)jquery無(wú)限級(jí)聯(lián)下拉菜單簡(jiǎn)單實(shí)例演示，感興趣的小伙伴們可以參考一下

本文實(shí)例講述了jquery無(wú)限級(jí)聯(lián)下拉菜單代碼以及jquery無(wú)限級(jí)聯(lián)下拉菜單實(shí)現(xiàn)思路。分享給大家供大家參考。具體如下：

最終效果圖：

因?yàn)槭羌?jí)聯(lián)，所以數(shù)據(jù)必須是樹(shù)型結(jié)構(gòu)的，這里的測(cè)試數(shù)據(jù)如下：

看下效果圖：

1、效果圖一：

2、效果圖二：

3、效果圖三：

　　由圖可知，下拉框的個(gè)數(shù)并不是寫(xiě)死的，而是動(dòng)態(tài)加載的。每當(dāng)下拉框選擇改變的時(shí)候，會(huì)發(fā)送一次ajax請(qǐng)求，請(qǐng)求成功返回json格式數(shù)據(jù)，當(dāng)返回的數(shù)據(jù)不為空時(shí)（即有子節(jié)點(diǎn)時(shí)），則會(huì)向頁(yè)面中添加一個(gè)下拉框，沒(méi)有則不添加。

插件的實(shí)現(xiàn)代碼如下：

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

  //默認(rèn)參數(shù)設(shè)置
  var settings = {
   url: "/Handler.ashx", //請(qǐng)求路徑
   data: "0",    //初始值(字符串格式)
   split: ",",    //分割符
   cssName: "select",  //樣式名稱(chēng)
   val: "id",    //<option value="id">name</option>
   text: "name",   //<option value="id">name</option>
   hiddenName: "selVal" //隱藏域的name屬性的值
  }

  //合并參數(shù)
  if (options)
   $.extend(settings, options);


  //鏈?zhǔn)皆瓌t
  return this.each(function () {

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

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

    //創(chuàng)建隱藏域?qū)ο?并賦初始值
    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++) {
     //創(chuàng)建下拉框
     createSelect(container, arr[i], arr[i + 1] || -1);
    }
   }


   /*
   創(chuàng)建下拉框
   @param container 容器對(duì)象
   @param parentid  父ID號(hào)
   @param id   自身ID號(hào)
   */
   function createSelect(container, parentid, id) {

    //創(chuàng)建select對(duì)象，并將select對(duì)象放入container內(nèi)
    var _select = $("<select></select>").appendTo(container).addClass(settings.cssName);

    //如果parentid為空，則_parentid值為0
    var _parentid = parentid || 0;

    //發(fā)送AJAX請(qǐng)求,返回的data必須為json格式
    $.getJSON(settings.url, { parentid: _parentid }, function (data) {

     //添加子節(jié)點(diǎn)<option>
     addOptions(container, _select, data).val(id || -1)

    });
   }


   /*
   為下拉框添加<option>子節(jié)點(diǎn)
   @param container 容器對(duì)象
   @param select  下拉框?qū)ο?
   @param data   子節(jié)點(diǎn)數(shù)據(jù)(要求數(shù)據(jù)為json格式)
   */
   function addOptions(container, select, data) {

    select.append($('<option value="-1">=請(qǐng)選擇=</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事件函數(shù)
   @param container 容器對(duì)象
   @param select  下拉框?qū)ο?
   @param id   當(dāng)前下拉框的值
   */
   function _onchange(container, select, id) {

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

    //如果當(dāng)前select對(duì)象的值是空或-1（即：==請(qǐng)選擇==），則將其后面的select對(duì)象全部移除
    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);

      //判斷當(dāng)前select對(duì)象后面是否跟有select對(duì)象
      if (nextAll.length < 1) {

       select.after(_select); //沒(méi)有則直接添加

      } else {

       nextAll.remove(); //有則先移除再添加
       select.after(_select);
      }
     }
     else {
      nextAll.remove(); //沒(méi)有子項(xiàng)則后面的select全部移除
     }
　　　　　　　　　　　 saveVal(container); //進(jìn)行數(shù)據(jù)保存，此方法必須放在回調(diào)函數(shù)里面
    });

　　　　　　　　　//saveVal(container); //如果放在這里，則會(huì)出現(xiàn)bug

   }


   /*
   將選擇的值保存在隱藏域中，用于表單提交保存
   @param container 容器對(duì)象
   */
   function saveVal(container) {

    var arr = new Array();
    arr.push(0); //為數(shù)組arr添加元素0，父節(jié)點(diǎn)從0開(kāi)始，所以添加0

    $("select", container).each(function () {
     if ($(this).val() > 0) {
      arr.push($(this).val()); //獲取container下每個(gè)select對(duì)象的值，并添加到數(shù)組arr
     }
    });

    //為隱藏域?qū)ο筚x值
    $("input[name='" + settings.hiddenName + "']", container).val(arr.join(settings.split));
   }

  });
 }
})(jQuery);

注釋我已經(jīng)盡量寫(xiě)的詳細(xì)了，但還是要針對(duì)一些知識(shí)點(diǎn)進(jìn)行講解。

1、我這里后臺(tái)語(yǔ)言用的是C#，因此你看到的請(qǐng)求路徑是這樣的（url:"/Handler.ashx"），你用其它語(yǔ)言是沒(méi)有問(wèn)題的，但是通過(guò)ajax請(qǐng)求返回的數(shù)據(jù)必須是json格式的數(shù)據(jù)。

2、在初始化方法 init() 中，我們向容器中放入了一個(gè)隱藏域，這個(gè)隱藏域是用來(lái)存值的，我們通過(guò)一個(gè) saveVal() 方法為其賦值。之所以要加隱藏域，是因?yàn)槲覀冞x擇的數(shù)據(jù)最終　　是要保存到數(shù)據(jù)庫(kù)中的，這樣就會(huì)有表單提交操作，因此加個(gè)隱藏域。

3、默認(rèn)參數(shù)設(shè)置(settings)里面的split分割符。這里用的是逗號(hào)(,) 你也可以改用其它的，比如(-)或者(|)。它主要是用來(lái)拆分和組合所有下拉框的值的。

　　拆分主要是在初始化(init)的時(shí)候，比如你給的初始值(data)不是0，而是 0,1,4 這時(shí)就會(huì)將其拆分，逐一執(zhí)行創(chuàng)建下拉框方法 createSelect()

　　組合主要是在給隱藏域賦值的時(shí)候，用分割符將各個(gè)下拉框的值拼接成一個(gè)字符串，然后賦給隱藏域。

4、默認(rèn)參數(shù)設(shè)置(settings)里面的 {val: "id", text: "name" } 。它們對(duì)應(yīng)的是你返回的json對(duì)象中對(duì)應(yīng)的屬性名。

5、在_onchange()方法里面有寫(xiě)到saveVal()執(zhí)行位置的問(wèn)題。之所以寫(xiě)在回調(diào)函數(shù)外面會(huì)出現(xiàn)bug，是因?yàn)?.getJSON()默認(rèn)是異步的，在回調(diào)方法還沒(méi)執(zhí)行完時(shí)，就執(zhí)行了　　　saveVal()方法。我們來(lái)看來(lái)bug所在:

　　此時(shí)隱藏域的值是錯(cuò)誤的，正確的值應(yīng)該是 0,1,5 。由于回調(diào)函數(shù)還沒(méi)執(zhí)行完，也就是nextAll.remove()這個(gè)還沒(méi)執(zhí)行的時(shí)候，就是執(zhí)行了saveVal()

DEMO的Html部分的代碼：

<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"}); //設(shè)置初始值為0,1,4
 </script>
</body>
</html>

以上就是jquery實(shí)現(xiàn)無(wú)限級(jí)聯(lián)下拉菜單效果的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: