jquery 下拉多选
jquery多选下拉菜单
作者：zccst
一、原理
官方网址：http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
下拉菜单可以多选
二、安装与配置
1，到官方网站下载
需要的相关插件
(1)jquery//依赖
(2)jquery-ui//依赖
(3)jquery.multiselect
注：附件中已经有jquery.multiselect
2，在需要的页面引入js和css即可
3，配置项
Js代码
//一个实例
$(document).ready(function(){
$("#roleIds").multiSelect({
minWidth:255,
checkAllText:'全选',
uncheckAllText:'全不选',
selectedText:"当前有#个被选中，共#个",
selectedList:6,
show:["slide",500],
hide:["explode",1000]
});
});
//jqueryui的动画效果有
//'blind','bounce','clip','drop','explode','fold','highlight','puff','pulsate','scale','shake','size','slide','transfer'.
三、实例
Html代码
<scripttype="text/javascript"src="../../../jquery/jquery-1.7.1.js"></script>
<scripttype="text/javascript"src="jquery-ui.min.js"></script>
<scripttype="text/javascript"src="jquery.multiselect.js"></script>
<linktype="text/css"href="jquery.multiselect.css"rel="stylesheet"/>
<linktype="text/css"href="jquery-ui.css"rel="stylesheet"/>
<scripttype="text/javascript">
$(document).ready(function(){
//$("#example").multiselect();
$("select").multiselect({
'header':false
});
});
</script>
<selectid="example"name="example"multiple="multiple">
<optionvalue="1">Option1</option>
<optionvalue="2">Option2</option>
<optionvalue="3">Option3</option>
<optionvalue="4">Option4</option>
<optionvalue="5">Option5</option>
</select>
注：jquery-ui不只是两个文件，还有images。
四、获取其值
尽管是下拉菜单，本质是checkbox，所以取值按checkbox。
Js代码
varidcs="";
$("input[name='multiselect_outsource_idcs']:checkbox:checked").each(function(){
idcs+=$(this).val()+";";
});
//注：特点是在原来name的基础上，前面多加了个multiselect_。