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 相关文章推荐
javascript语言结构小记(一)
Sep 10 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
js给table赋值的实例代码
Oct 13 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
浅谈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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
JS获取父节点方法
2009/08/20 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
Python进行数据科学工作的简单入门教程
2015/04/01 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
python简单实现刷新智联简历
2016/03/30 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
如何利用Python识别图片中的文字
2020/05/31 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
中国梦团日活动总结
2014/07/07 职场文书
淘宝客服工作职责
2014/07/11 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏