jquery無限級聯(lián)下拉菜單簡單實例演示
本文實例講述了jquery無限級聯(lián)下拉菜單代碼以及jquery無限級聯(lián)下拉菜單實現(xiàn)思路。分享給大家供大家參考。具體如下：
最終效果圖：
因為是級聯(lián)，所以數(shù)據(jù)必須是樹型結(jié)構(gòu)的，這里的測試數(shù)據(jù)如下：
看下效果圖：
1、效果圖一：
2、效果圖二：
3、效果圖三：
由圖可知，下拉框的個數(shù)并不是寫死的，而是動態(tài)加載的。每當下拉框選擇改變的時候，會發(fā)送一次ajax請求，請求成功返回json格式數(shù)據(jù)，當返回的數(shù)據(jù)不為空時（即有子節(jié)點時），則會向頁面中添加一個下拉框，沒有則不添加。
插件的實現(xiàn)代碼如下：
(function ($) {
$.fn.CascadingSelect = function (options) {
//默認參數(shù)設置
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屬性的值
}
//合并參數(shù)
if (options)
$.extend(settings, options);
//鏈式原則
return this.each(function () {
init($(this), settings.data);
/*
初始化
@param container 容器對象
@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 容器對象
@param parentid 父ID號
@param id 自身ID號
*/
function createSelect(container, parentid, id) {
//創(chuàng)建select對象，并將select對象放入container內(nèi)
var _select = $("<select></select>").appendTo(container).addClass(settings.cssName);
//如果parentid為空，則_parentid值為0
var _parentid = parentid || 0;
//發(fā)送AJAX請求,返回的data必須為json格式
$.getJSON(settings.url, { parentid: _parentid }, function (data) {
//添加子節(jié)點<option>
addOptions(container, _select, data).val(id || -1)
});
}
/*
為下拉框添加<option>子節(jié)點
@param container 容器對象
@param select 下拉框?qū)ο?
@param data 子節(jié)點數(shù)據(jù)(要求數(shù)據(jù)為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事件函數(shù)
@param container 容器對象
@param select 下拉框?qū)ο?
@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); //進行數(shù)據(jù)保存，此方法必須放在回調(diào)函數(shù)里面
});
//saveVal(container); //如果放在這里，則會出現(xiàn)bug
}
/*
將選擇的值保存在隱藏域中，用于表單提交保存
@param container 容器對象
*/
function saveVal(container) {
var arr = new Array();
arr.push(0); //為數(shù)組arr添加元素0，父節(jié)點從0開始，所以添加0
$("select", container).each(function () {
if ($(this).val() > 0) {
arr.push($(this).val()); //獲取container下每個select對象的值，并添加到數(shù)組arr
}
});
//為隱藏域?qū)ο筚x值
$("input[name='" + settings.hiddenName + "']", container).val(arr.join(settings.split));
}
});
}
})(jQuery);
注釋我已經(jīng)盡量寫的詳細了，但還是要針對一些知識點進行講解。
1、我這里后臺語言用的是C#，因此你看到的請求路徑是這樣的（url:"/Handler.ashx"），你用其它語言是沒有問題的，但是通過ajax請求返回的數(shù)據(jù)必須是json格式的數(shù)據(jù)。
2、在初始化方法 init() 中，我們向容器中放入了一個隱藏域，這個隱藏域是用來存值的，我們通過一個 saveVal() 方法為其賦值。之所以要加隱藏域，是因為我們選擇的數(shù)據(jù)最終 是要保存到數(shù)據(jù)庫中的，這樣就會有表單提交操作，因此加個隱藏域。
3、默認參數(shù)設置(settings)里面的split分割符。這里用的是逗號(,) 你也可以改用其它的，比如(-)或者(|)。它主要是用來拆分和組合所有下拉框的值的。
拆分主要是在初始化(init)的時候，比如你給的初始值(data)不是0，而是 0,1,4 這時就會將其拆分，逐一執(zhí)行創(chuàng)建下拉框方法 createSelect()
組合主要是在給隱藏域賦值的時候，用分割符將各個下拉框的值拼接成一個字符串，然后賦給隱藏域。
4、默認參數(shù)設置(settings)里面的 {val: "id", text: "name" } 。它們對應的是你返回的json對象中對應的屬性名。
5、在_onchange()方法里面有寫到saveVal()執(zhí)行位置的問題。之所以寫在回調(diào)函數(shù)外面會出現(xiàn)bug，是因為$.getJSON()默認是異步的，在回調(diào)方法還沒執(zhí)行完時，就執(zhí)行了 saveVal()方法。我們來看來bug所在:
此時隱藏域的值是錯誤的，正確的值應該是 0,1,5 。由于回調(diào)函數(shù)還沒執(zhí)行完，也就是nextAll.remove()這個還沒執(zhí)行的時候，就是執(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"}); //設置初始值為0,1,4
</script>
</body>
</html>
以上就是jquery實現(xiàn)無限級聯(lián)下拉菜單效果的全部內(nèi)容，希望對大家的學習有所幫助。
相關文章
使用jQuery實現(xiàn)Web頁面換膚功能的要點解析
網(wǎng)頁換膚的實質(zhì)就是切換CSS樣式,關鍵是給用戶做出點擊切換的功能以及換膚完成之后的緩存記錄功能,下面我們就來看一下使用jQuery實現(xiàn)Web頁面換膚功能的要點解析:2016-05-05
通過電商購買過電影票的朋友都很熟悉此功能，那么在線選座訂座使用程序怎么實現(xiàn)的呢，接下來，給大家分享基于jquery實現(xiàn)在線選座訂座之影院篇，感興趣的朋友快來圍觀2015-08-08
這篇文章主要介紹了jquery文本框中的事件應用以輸入郵箱為例,需要的朋友可以參考下2014-05-05
為jquery.ui.dialog 增加“自動記住關閉時的位置”的功能
筆者在項目中使用 jquery.ui.dialog 1.7.2時，當使用$("#d").dialog("open");時，dialog總是彈出在option中指定的位置；2009-11-11
網(wǎng)上關于JS實現(xiàn)貪吃蛇的文章有很多，最近閑來無事，想著利用jQury來實現(xiàn)貪吃蛇小游戲，下面實現(xiàn)這篇文章主要介紹了利用jQuery實現(xiàn)貪吃蛇小游戲的方法，文中給出的是吸納思路和示例代碼，需要的朋友可以參考下。2017-03-03
利用webqq協(xié)議使用python登錄qq發(fā)消息源碼參考
本文將詳細介紹下利用webqq協(xié)議使用python登錄qq發(fā)消息實現(xiàn)思路及代碼，感興趣的朋友可以參考下，希望對你有所幫助2013-04-04
基于jQuery的message插件實現(xiàn)右下角彈出消息框
有時在頁面加載的時候，需要在頁面的右下角彈出一個小的提示框，顯示一些提示信息給用戶，通過使用jQuery的message插件，可以很方便的實現(xiàn)這個效果，在使用之前先介紹一下message插件中的方法的使用。2011-01-01
這篇文章主要介紹了jQuery Form 頁面表單提交的小例子，有需要的朋友可以參考一下2013-11-11
本文給大家分享jquery中map函數(shù)的兩種方式，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-04-04
jBox 2.3基于jquery的最新多功能對話框插件 常見使用問題解答
jBox 是一款基于 jQuery 的多功能對話框插件，能夠?qū)崿F(xiàn)網(wǎng)站的整體風格效果，給用戶一個新的視覺享受。2011-11-11