用select2编写数据切换的下拉菜单
最近刚进了一家公司，带我的老师让我写一个下拉选择框。要实现可以搜索过滤数据，而且还可以切换不通种类的数据。刚开始在网上搜了一些插件，也看了一些别人写的博客，最后选择了一个jQuery的插件chosen。用着个的原因是，他的实现效果和我想要的效果太像了。下面看一下用chosen实现的代码：
$('.dept_select').chosen();//初始化
var thingData = {//模拟后台数据
'fruit': {'title':'选择水果','kind':[{'f':'苹果'},{'f':'橘子'},{'f':'桃子'},{'f':'李子'},{'f':'菠萝'},{'f':'葡萄'}]},
'vegetable': {'title':'选择蔬菜','kind':[{'f':'茄子'},{'f':'白菜'},{'f':'萝卜'},{'f':'洋葱'},{'f':'豆角'}]}
};
$("#fruit").on('click',function(){//给按钮添加点击事件
changeData('#dept',thingData.fruit);
});
$("#veg").on('click',function(){
changeData('#dept',thingData.vegetable);
});
var changeData = function(sel,data){
var opt = '';//用来存储数据
$(sel).empty();//清空select的内容
for(var i = 0,len = data.kind.length ; i < len ; ++i){//循环叠加数据
opt+='+data.kind[i].f+'';
}
$(sel).attr('data-placeholder',data.title);//设置select的属性，用来显示标题
$(sel).html(opt);//给select添加内容
$(sel).trigger("chosen:updated");//更新下拉列表
};
changeData('#dept',thingData.fruit);//初始化数据，开始显示水果的数据出现的效果如图所示：
感觉这个效果并不是太难，写完后就发给老师看。老师看了感觉还是满意的。老师看完之后说让我用select2再写一个同样的效果。在此之前没听说过select2这个插件，然后就去网上各种查，最后查出了点眉目。有了前一个效果的基础，用select2写效果就简单了。
很快就用select2把之前的效果给写出来了。然后就发给老师看后，老师看完后有让我加新功能，哎加就加把。要加的新功能是：
1、当下拉框选项被选中的时候，在控制台打印出来当前选择的项的文本
2、下拉框分组
3、下拉框，有些选项不能选择(禁选)
刚开始感觉这几个功能不难，就试着去加新功能。没想到第一个功能就把我难住了。刚开始以为给下拉框的每一项添加事件，所以就用了js的事件委托。可是死活效果就是出不来，急的我不行不行的。于是就在网上又各种搜，最后终于找到方法了，代码如下：
$('#selectform').change(function(){//打印出被选的选项的值
var f = $('#selectform option:selected').text();
console.log(f);
});WTF真是简单，这才意识到自己走错路了。
这个功能实现后，脑子灵光一闪，其他两个功能就有了方法了。
下面看一下完整的js代码：
$(function(){
$("#selectform").select2();//初始化select2对象
$('#selectform').change(function(){//打印出被选的选项的值
var f = $('#selectform option:selected').text();
console.log(f);
});
var thingData = {//模拟后台数据
'fruit': {'title':'选择水果',
'group': [
{'kindName' : '春季水果', 'kind' : [{'f':'草莓'},{'f':'芒果'},{'f':'李子'},{'f':'菠萝'},{'f':'杏'}]},
{'kindName' : '夏季水果', 'kind' : [{'f':'西瓜'},{'f':'山竹'},{'f':'香蕉'},{'f':'火龙果'},{'f':'木瓜'}]}
]
},
'vegetable': {'title':'选择蔬菜',
'group': [
{'kindName' : '春季蔬菜','kind' : [{'f':'菠菜'},{'f':'莴笋'},{'f':'春笋'},{'f':'韭菜'}]},
{'kindName' : '夏季蔬菜','kind' : [{'f':'丝瓜'},{'f':'苦瓜'},{'f':'芦笋'},{'f':'西红柿'}]},
]
}
};
$("#fruit").on('click',function(){//给按钮添加点击事件
changeData('#selectform',thingData.fruit);
selectDisabled('#selectform');
});
$("#veg").on('click',function(){
changeData('#selectform ',thingData.vegetable);
selectDisabled('#selectform');
});
var changeData = function(sel,data){
var optp = '';//用来存储数据，设置第一个option冲动占位符
var optgp = '';//用来存储分组
$(sel).empty();//清空select的内容
for(var j = 0 , leno = data.group.length ; j < leno ; ++j){//循环组
var opt = '';//用来存储每一组的物品，且当存储完没一组物品将值赋给optgp后清空
for(var i = 0,len = data.group[j].kind.length ; i < len ; ++i){//循环叠加组中的数据
opt+=')+'">'+data.group[j].kind[i].f+'';
}
optgp += ' + opt + '';
};
$(sel).html(optp+optgp);//给select添加内容
$('[value="placeholder"]').html(data.title);//给占位符赋值，用来提示选择的类别
};
changeData('#selectform',thingData.fruit);//初始化数据，开始显示水果的数据
selectDisabled('#selectform');//初始化
});
var selectDisabled = function(sel){//过滤条件让一些选项不能选
var $opts = $(sel+' option');
$opts.each(function(i,target){//通过each方法循环设置不可选的选项
if(i%2 != 0){
$(target).attr({'disabled' : 'disabled'});
}
});
};HTML代码如下：
<body>
<div class="out" id="searchform">
<button id="fruit">水果button>
<button id="veg">蔬菜button>
<select class="select2" id="selectform">
select>
div>
body>