jQuery实现下拉框多选 jquery-multiselect 的实例代码


Posted in Javascript onJuly 14, 2016

先给大家展示下效果图:

jQuery实现下拉框多选 jquery-multiselect 的实例代码

除了jquery,需要引用的样式和js文件:

<link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="../assets/style.css" />
<link rel="stylesheet" type="text/css" href="../assets/prettify.css" />
<link href="../assets/jquery-ui.css" rel="stylesheet" />
<script src="../assets/jquery.js"></script>
<script src="../assets/jquery-ui.min.js"></script>
<script type="text/javascript" src="../assets/prettify.js"></script>
<script type="text/javascript" src="../assets/jquery.multiselect.js" charset=gb2312></script>

HTML代码:

<select title="Basic example" multiple="multiple" name="example-basic" size="5" id="ddlConditions">
<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>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
</select>

默认选中值1,2,3,绑定指定的选项:

var strcondition = '1,2,3'; 
var ids = strcondition.split(','); 
if (ids != null) { 
$('#ddlConditions').val(ids);
$('#ddlConditions').multiselect("refresh"); 
}

获取选中的多个值:

首先修改jquery.multiselect.js,添加全局变量multiValues ,用来存放选项值,然后修改update方法,添加multiValues 那一行代码:

update: function() {
var o = this.options;
var $inputs = this.inputs;
var $checked = $inputs.filter(':checked');
var numChecked = $checked.length;
var value;
if(numChecked === 0) {
value = o.noneSelectedText;
} else {
if($.isFunction(o.selectedText)) {
value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());
} else if(/\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList) {
value = $checked.map(function() { return $(this).next().html(); }).get().join(', ');
} else {
value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);
}
multiValues = $checked.map(function () { return $(this).val(); }).get().join(',');
}
this._setButtonValue(value);
return value;
},

再添加自定义方法:

MyValues:function(){
return multiValues;
},

页面使用此自定义方法,获取选中值的代码:

if ($('input[name=multiselect_ddlConditions]:checked').length < 1)
alert('Please Select Option');
else {
var strConditions = $("#ddlConditions").multiselect("MyValues");
}

以上所述是小编给大家介绍的jQuery实现下拉框多选 jquery-multiselect 的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
vue地区选择组件教程详解
May 04 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
浅谈addEventListener和attachEvent的区别
Jul 14 #Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 #Javascript
全面了解addEventListener和on的区别
Jul 14 #Javascript
js计算系统当前日期是星期几的方法
Jul 14 #Javascript
原生javascript 学习之js变量全面了解
Jul 14 #Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 #Javascript
AngularJS实用开发技巧(推荐)
Jul 13 #Javascript
You might like
使用PHP制作新闻系统的思路
2006/10/09 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
php简单获取复选框值的方法
2016/05/11 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
整理Python 常用string函数(收藏)
2016/05/30 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python去除扩展名的实例讲解
2018/04/23 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Python matplotlib可视化实例解析
2020/06/01 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
几道PHP的面试题
2012/05/19 面试题
技校生自我鉴定范文
2013/09/26 职场文书
高三物理教学反思
2016/02/20 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
golang为什么要统一错误处理
2022/04/03 Golang