当前位置: 编程技术>jquery
jquery easyui多选下拉菜单实例
来源: 互联网 发布时间:2014-10-08
本文导语: jquery多选下拉菜单 一、原理 官方网址: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ 下拉菜单可以多选 二、安装与配置 1,到官方网站下载 需要的相关插件 (1) jquery //依赖 (2) jquery-ui //依赖 (3) jquery.multiselect 2...
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() {
$("#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_。
$("input[name='multiselect_outsource_idcs']:checkbox:checked").each(function(){
idcs += $(this).val()+";";
});
//注:特点是在原来name的基础上,前面多加了个multiselect_。