本文實例講述了jquery無限級聯下拉菜單代碼以及jquery無限級聯下拉菜單實現思路。分享給大家供大家參考。具體如下：
最終效果圖：
因為是級聯，所以數據必須是樹型結構的，這里的測試數據如下：
看下效果圖：
1、效果圖一：
2、效果圖二：
3、效果圖三：
由圖可知，下拉框的個數并不是寫死的，而是動態加載的。每當下拉框選擇改變的時候，會發送一次ajax請求，請求成功返回json格式數據，當返回的數據不為空時（即有子節點時），則會向頁面中添加一個下拉框，沒有則不添加。
插件的實現代碼如下：
(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);注釋我已經盡量寫的詳細了，但還是要針對一些知識點進行講解。
1、我這里后臺語言用的是C#，因此你看到的請求路徑是這樣的（url:"/Handler.ashx"），你用其它語言是沒有問題的，但是通過ajax請求返回的數據必須是json格式的數據。
2、在初始化方法 init() 中，我們向容器中放入了一個隱藏域，這個隱藏域是用來存值的，我們通過一個 saveVal() 方法為其賦值。之所以要加隱藏域，是因為我們選擇的數據最終 是要保存到數據庫中的，這樣就會有表單提交操作，因此加個隱藏域。
3、默認參數設置(settings)里面的split分割符。這里用的是逗號(,) 你也可以改用其它的，比如(-)或者(|)。它主要是用來拆分和組合所有下拉框的值的。
拆分主要是在初始化(init)的時候，比如你給的初始值(data)不是0，而是 0,1,4 這時就會將其拆分，逐一執行創建下拉框方法 createSelect()
組合主要是在給隱藏域賦值的時候，用分割符將各個下拉框的值拼接成一個字符串，然后賦給隱藏域。
4、默認參數設置(settings)里面的 {val: "id", text: "name" } 。它們對應的是你返回的json對象中對應的屬性名。
5、在_onchange()方法里面有寫到saveVal()執行位置的問題。之所以寫在回調函數外面會出現bug，是因為$.getJSON()默認是異步的，在回調方法還沒執行完時，就執行了 saveVal()方法。我們來看來bug所在:
此時隱藏域的值是錯誤的，正確的值應該是 0,1,5 。由于回調函數還沒執行完，也就是nextAll.remove()這個還沒執行的時候，就是執行了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"}); //設置初始值為0,1,4 </script></body></html>以上就是jquery實現無限級聯下拉菜單效果的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
