開發中，有好多地方用到連動選單，以前每次遇到連動選單的時候都去重新寫，程式碼重用率很低，前幾天又遇到連動選單的問題，總結了下，發現可以開發一個連動選單的功能，以後想用的時候就方便多了。專案中每個頁面都有引用jQuery，，開發個jQuery聯動選單插件，說動手就動手，下面跟大家分享分享。
我用的jQuery插件方式
(function($){
$.fn.casmenu=function(argvs){
//your code
}
})(jQuery);
登入後複製
其中jQuery傳入的是jquery對象，需要在擴展之前引用。在擴充中同樣使用jQuery的短格式$。
$.fn是指jquery的命名空間，加在fn上的方法及屬性，會對jquery實例每一個有效，看看下面的jquery源碼101行左右：
jQuery.fn = jQuery.prototype = {
......
}登入後複製
比如說後面要開發的$.fn.casmenu()，定義之後，在後面的jquery物件都可以使用該方法。
這裡還有一個擴充的方法：
$.extend({
funName: function(){
//your code
},
});登入後複製
這種擴充方法和上面的是有區別的，要是拿類別做類比的話，$.extend這種方法相當於類別中的靜態方法，上面的一種方式相當於非靜態方法，必須有對象才可以使用。簡單的理解，是下面這樣的：
//$.fn.casemenu 方式扩展的方法，必须在有jquery对象的时候才可以使用
$("#mydiv").casmenu();
//$.extend({}) 方式扩展的方法，可以直接使用
$.add(2,3);
登入後複製
設計思路
首先是層級選單的資料保存方式，看看下面的資料：
var levels={
//内容中有引号，必须使用单引号，外引号必须用双引号
//name => value
1:{
退出应用: "code1003",
登录界面:"code1004",
跳转至个人资料界面:"code1005",
},
2:{
退出应用:{
应用1:"gameid1",
应用2:"gameid2",
应用3:"gameid3",
应用4:"gameid4",
应用5:"gameid5",
},
跳转至个人资料界面:{
主界面:"main interface",
}
},
3:{
应用1:{
中级场:"12",
高级场:"13",
职业场:"14",
比赛场:"15",
}
}
}
登入後複製
物件levels中的直接鍵值1、2、3代表選單的層級，沒有就不用些，每一項name=>value代表select中option的名稱和value。
層級有規律，某一層級中的某一項要是有下一層選單，在下一層及有該項的名稱，就像levels[1]['退出應用程式']在有下級選單，就有levels[2]['退出應用程式']，如果繼續有下級選單，就像levels[2]['退出應用程式']['應用程式1']，會在下一層及中繼續有levels[3][ '應用1']。這樣一來，就實現了無限級聯式選單，不同的連動選單只需要修改選單設定檔就可以了。
但是這麼做又有一個遺憾，就是如果level2[2]中的子項有兩個名稱相同的，都有下級菜單，而且下級菜單內容還不一樣，就會有問題，因此在設定的時候，有下級選單的項目要取不同的名稱，這裡要注意下。就目前這種來說，簡單，好理解，也夠用了。
程式碼實作
在程式碼中也用到了$.extend，用來擴充預設配置。
還有一個點要注意，在連動的時候會將實事的選單值放入一個屬性為hidden的input中，用預設逗號分割每個層級之間的值，可以很輕鬆的取得到連動選單所有項的值
if(typeof(AI.opts.saveinput) != "undefined" && (AI.opts.saveinput = AI.opts.saveinput.toString()) != ''){
$("<input type='hidden' value='' name='"+AI.opts.saveinput+"' id='"+AI.opts.saveinput+"' />").appendTo($('body'));
}
登入後複製
(function($){
//配置
var AI={
opts:{
saveinput:"jumpcode", //是否将结果保存至input
levels:{},
ulObj:{},//保存生成好的ul列表
length:0, //层级菜单的层级
divide:",",//默认各个层级菜单之间的分隔符
}
};
$.fn.casmenu=function(opts){
AI.opts = $.extend(AI.opts, opts);
if((AI.opts.length = Object.keys(AI.opts.levels).length) <= 0){
throw "levels arr must not be empty";
return;
}
var _levels = AI.opts.levels;
if(_levels[1] == undefined){
throw "menu level 1 must not be empty";
return;
}
var _levels_1 = _levels[1];
if(typeof(AI.opts.saveinput) != "undefined" && (AI.opts.saveinput = AI.opts.saveinput.toString()) != ''){
$("<input type='hidden' value='' name='"+AI.opts.saveinput+"' id='"+AI.opts.saveinput+"' />").appendTo($('body'));
}
AI.opts.ulObj['level_1'] = '<select class="casmenu" level="1">';
AI.opts.ulObj['level_1'] += '<option value="null">请选择</option>';
$("#"+AI.opts.saveinput).val('null');
for(var i in _levels_1){
AI.opts.ulObj['level_1'] += '<option name="'+i+'" value="'+_levels_1[i]+'">'+i+'</option>';
}
AI.opts.ulObj['level_1'] += '</select>';
$(AI.opts.ulObj['level_1']).appendTo(this);
$("body").on("change", ".casmenu", function(){
var level = $(this).attr("level");
if(level > AI.opts.length) return;
level++;
//移除当前触发菜单之后的菜单
for(var num=level;num<=AI.opts.length;num++){
$(".casmenu[level="+num+"]").remove();
}
//设置input的值，级联菜单的值
var _val = '';
for(var val=1;val<=AI.opts.length;val++){
var __val = $("select[level="+val+"]");
if(__val.length <= 0)
continue;
_val += __val.val()+AI.opts.divide;
}
$("#"+AI.opts.saveinput).val(_val.substr(0, _val.length-1));
//levels对象中不存在下一级别目录
if(typeof(AI.opts.levels[level]) == "undefined") return;
//获取下一级别目录的键值，值不存在的话返回
var name = $(this).find("option:selected").attr("name");
if(typeof(AI.opts.levels[level][name]) == "undefined") return;
if(typeof(AI.opts.ulObj['level_'+level]) == "undefined" || typeof(AI.opts.ulObj['level_'+level][name]) == "undefined"){
if(typeof(AI.opts.ulObj['level_'+level]) == "undefined")
AI.opts.ulObj['level_'+level] = {};
AI.opts.ulObj['level_'+level][name] = '<select class="casmenu" level="'+level+'">';
AI.opts.ulObj['level_'+level][name] += '<option value="null">请选择</option>';
var levelinfo = AI.opts.levels[level][name];
for(var i in levelinfo){
AI.opts.ulObj['level_'+level][name] += '<option name="'+i+'" value="'+levelinfo[i]+'" >'+i+'</option>';
}
AI.opts.ulObj['level_'+level][name] += '</select>';
}
$(AI.opts.ulObj['level_'+level][name]).appendTo($(this).parent());
var _val = '';
for(var val=1;val<=AI.opts.length;val++){
var __val = $("select[level="+val+"]");
if(__val.length <= 0)
continue;
_val += __val.val()+AI.opts.divide;
}
$("#"+AI.opts.saveinput).val(_val.substr(0, _val.length-1));
});
}
})(jQuery);
登入後複製
運作效果：
以上就是為大家分享的jQuery外掛實現多級連動選單效果，希望對大家的學習有所幫助。
