Bootstrap select多选下拉框实现代码


Posted in Javascript onDecember 23, 2016

前言

项目中要实现多选,就想到用插件,选择了bootstrap-select。

附上官网api链接,http://silviomoreto.github.io/bootstrap-select/.

没有中文的。对付看吧。有机会每个方法实践一下,会总结的。我自己也等着呢。

需要引用的它们

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>

核心选项

官网有的,期待翻译。。。

核心方法

官网有的,期待翻译。。。

实例应用

bootstrap布局后,select多选代码如下

<div class="form-group">
    <label class="col-sm-3 control-label">客资类型:</label>
    <div class="col-sm-4">
    <select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-live-search="false">
     <option value="0">苹果</option>
     <option value="1">菠萝</option>
     <option value="2">香蕉</option>
     <option value="3">火龙果</option>
     <option value="4">梨子</option>
     <option value="5">草莓</option>
     <option value="6">哈密瓜</option>
     <option value="7">椰子</option>
     <option value="8">猕猴桃</option>
     <option value="9">桃子</option>
    </select>
    </div>
    </div>

js代码:

$(window).on('load', function () {
 $('#usertype').selectpicker({
 'selectedText': 'cat'
 });
});

页面效果:

Bootstrap select多选下拉框实现代码

选择后的效果如下:

Bootstrap select多选下拉框实现代码

获取值, $("#XXX").val()即可

回显操作:

用方法 $('.selectpicker').selectpicker('val', 'Mustard'); 

Mustard处填入数组。代码如下:

var str='3,4,5,6';
var arr=str.split(',');
$('#usertype').selectpicker('val', arr);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
详解vue挂载到dom上会发生什么
Jan 20 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 #Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 #Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 #Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 #Javascript
Bootstrap源码解读排版(1)
Dec 23 #Javascript
简单实现JS倒计时效果
Dec 23 #Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 #Javascript
You might like
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
php进程间通讯实例分析
2016/07/11 PHP
定义select的边框颜色
2008/04/28 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python序列操作之进阶篇
2016/12/08 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
计算机专业优秀大学生自我总结
2014/01/21 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
教育合作协议范本
2014/10/17 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python