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'.
三、实例
<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。
$("input[name='multiselect_outsource_idcs']:checkbox:checked").each(function(){
idcs += $(this).val()+";";
});
//注：特点是在原来name的基础上，前面多加了个multiselect_。
您可能感兴趣的文章：
jQuery EasyUI 教程
jquery easyui多选下拉菜单实例
jquery-easyui创建下拉菜单的例子
jQuery EasyUI 树形菜单 – 创建带复选框的树形菜单
jQuery菜单插件 Smooth Navigational Menu
jQuery EasyUI 树形菜单 – 树形菜单拖放控制
jquery easyui自定义下拉框列表
jQuery EasyUI 表单 – 创建树形下拉框（ComboTree）
jQuery EasyUI 表单 – 格式化下拉框（ComboBox）
jQuery-Easyui 1.2 实现多层菜单效果的代码