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_。
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo
jQuery下拉复选菜单,可实现多选全选功能,并提供下拉框内实时搜索
一款点击input文本框弹出下拉菜单,选中菜单,支持多选条件,进行搜索的jQuery搜索框下拉菜单选择插件,功能很强大的下拉框搜索代码。
jQuery模拟Select下拉菜单选中添加代码是一款支持多选的下拉菜单选项选择插件,带搜索功能。
jQuery Select下拉框分类菜单多选插件一款功能比较全面的自定义下拉菜单选项多选代码,除了可以对选项进行分类,还带有搜索功能。
强大的jquery下拉框插件 下拉框展示带列表分页功能,适合下拉框大量数据展示 下拉框带快速查找,可以快速筛选 支持多选 基于jQuery、Bootstrap2、3开发 也可应用于无任何UI框架的原生HTML环境 Autocomplete输入自动...
基于jquery的一个插件,使用这个插件可以很轻易的实现多级下拉树形菜单
jQuery多功能搜索框插件下拉菜单选择代码.rar
jQuery搜索框插件下拉菜单选择代码是一款点击input框弹出下拉菜单,选中菜单,支持多选条件,进行搜索功能代码。
zTree插件之多选下拉菜单实例代码css和js 代码如下:<!–ztree树结构–><link rel=”stylesheet” type=”text/css” href=”assets/ztree/css/zTreeStyle.css”><link rel=”stylesheet” type=”text/...
jQuery下拉框菜单多选插件是一款带搜索的下拉框多选,下拉框验证,模拟select下拉框多选菜单效果代码。
jquery下拉多级树选择插件(支持左右移动,以及模糊搜索功能),能够实现2个下拉框之间数据的移动,单个下拉框支持模糊搜索,可快速定位节点
项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如下: 1.效果...
jQuery Selectric下拉框菜单选择插件是一款包含多种样式的Select下拉选择代码。主要功能有,基本用法,获取选定的选项值,设定值,更改选项,回调,通过Ajax请求填充,下拉框的自定义标记,下拉框定义向上,下拉框...
jQuery自定义下拉分类多选代码是一款基于jQuery Select制作的下拉框插件自定义下拉分类菜单,多选分类搜索功能代码。
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式。
实用jQuery省市区三级城市级联下拉菜单选择插件jQuery cxSelect,功能强大非常不错的jQuery插件, 支持省市区三级联动以及全球国家城市的联动,数据采用JSON格式导入,非常方便的,强大的参数 自定义功能,还可以...
jQuery下拉单选多选城市选择代码是一款select下拉框美化和下拉城市选择插件。