easyui下拉框option_jquery easyui多选下拉菜单实例

jquery多选下拉菜单

一、原理

官方网址：

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

下拉菜单可以多选

二、安装与配置

1，到官方网站下载

需要的相关插件

(1) jquery    //依赖

(2) jquery-ui  //依赖

(3) 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'.

三、实例

代码示例:

$(document).ready(function(){

//$("#example").multiselect();

$("select").multiselect({

'header':false

});

});

Option 1

Option 2

Option 3

Option 4

Option 5

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

四、获取其值

尽管是下拉菜单，本质是checkbox，所以取值按checkbox。

代码示例:

var idcs  = "";

$("input[name='multiselect_outsource_idcs']:checkbox:checked").each(function(){

idcs += $(this).val()+";";

});

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