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] 
    }); 
 
}); 
 
//jquery ui 的动画效果有 
//'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'. 


三、实例
Html代码 
<script type="text/javascript" src="../../../jquery/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="jquery-ui.min.js"></script> 
<script type="text/javascript" src="jquery.multiselect.js"></script> 
<link type="text/css" href="jquery.multiselect.css" rel="stylesheet" /> 
<link type="text/css" href="jquery-ui.css" rel="stylesheet" /> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    //$("#example").multiselect(); 
    $("select").multiselect({ 
        'header':false 
    });  
}); 
</script> 
<select id="example" name="example" multiple="multiple"> 
<option value="1">Option 1</option> 
<option value="2">Option 2</option> 
<option value="3">Option 3</option> 
<option value="4">Option 4</option> 
<option value="5">Option 5</option> 
</select> 

注：jquery-ui不只是两个文件，还有images。


四、获取其值
尽管是下拉菜单，本质是checkbox，所以取值按checkbox。
Js代码 
var idcs  = "";   
$("input[name='multiselect_outsource_idcs']:checkbox:checked").each(function(){ 
     idcs += $(this).val()+";"; 
}); 
 
//注：特点是在原来name的基础上，前面多加了个multiselect_。