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_。