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" 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。
var idcs  = "";  
$("input[name='multiselect_outsource_idcs']:checkbox:checked").each(function(){
     idcs += $(this).val()+";";
 });

//注:特点是在原来name的基础上,前面多加了个multiselect_。



如果您觉得本文的内容对您的学习有所帮助,您可以微信:
jquery【插件】多选下拉菜单

你可能感兴趣的:(jquery)