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，配置项

//一个实例$(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'.

三、实例

<script type="text/javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/../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。

var idcs  = "";  $("input[name='multiselect_outsource_idcs']:checkbox:checked").each(function(){     idcs += $(this).val()+";"; });//注：特点是在原来name的基础上，前面多加了个multiselect_。