一、分别引入bootstrap-select.min.js和bootstrap-select.min.css文件

二、在页面中写一个class为selectpicker的select控件

  <select id="selectpicker" name="category" class="selectpicker" multiple data-live-search="true"></select>

三、绑定数据的方式很多(如需选中,设置data里的option为selected即可),例如:

 ()$("#selectpicker").html(data);
()$("#selectpicker").selectpicker("val",data);

四、绑定完数据之后一定要调用$('.selectpicker').selectpicker('refresh')方法来刷新一下控件

前端多选插件bootstrap-select的使用的更多相关文章

  1. bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

    h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 ​ 首先引入bootstrap和bootstrap-select的c ...

  2. Bootstrap-风格的下拉按框:Bootstrap Select

    Bootstrap Select 是一个jQuery插件,提供了Bootstrap 风格的下拉选择框.拥有许多自定义的选项,可多选. 效果图: 源代码: <select class=" ...

  3. JS前端图形化插件之利器Gojs组件(php中文网)

    JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...

  4. Wrangle – 响应式的,触摸友好的多选插件

    Wrangle 是一个响应式,触摸友好的选择插件,支持 jQuery 以及 Zepto.Wrangle 为多项选择提供了一个独特的方法:通过画一条贯穿项目的线条来选择项目.它给你的应用程序的一种新的方 ...

  5. WordPress 前端投稿/编辑插件 DJD Site Post(支持游客和已注册用户)

    转自:http://www.wpdaxue.com/front-end-publishing.html 说到前端用户投稿,倡萌之前推荐过3个不错的插件: WordPress匿名投稿插件:DX-Cont ...

  6. multiSelect 下拉多选插件

    multiSelect是一款很好用的下拉多选插件,可以在下拉框中实现多选框,全选及取消全选等方法.使用方法:1.引用 multiSelect.css及 multiSelect.js.下载地址 http ...

  7. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  8. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  9. Web前端学习笔记之BootStrap

    Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...

随机推荐

  1. Python_paramiko模块

    paramiko模块安装:pip3 install paramiko paramiko模块(模拟SSH),是基于SSH(网络安全协议)用于连接远程服务器并执行相关操作. ssh: 基于口令的安全验证 ...

  2. 4.基于梯度的攻击——MIM

    MIM攻击原论文地址——https://arxiv.org/pdf/1710.06081.pdf 1.MIM攻击的原理 MIM攻击全称是 Momentum Iterative Method,其实这也是 ...

  3. 如何使用JMeter开源性能测试工具来构建Web性能测试体系

    一.性能测试一些概念 性能测试:就是通过自动化的测试工具模拟多种正常峰值及异常负载条件来对系统的各项性能指标进行测试.负载测试和压力测试都属于性能测试,两者可以结合进行. 负载测试:确定在各种工作负载 ...

  4. mobile_5 种常见适配_设备兼容

    em  参照本身元素的 font-size rem 参照 html 根元素 的 font-size 1. rem 适配   (同一元素,在不同设备上,效果一样) 适用情况: 当页面大于 独立像素375 ...

  5. 【函数式编程】reducer为什么叫reducer

    最近学习前端的技术,在了解react对DOM的组件抽象,但不提供整体的组件通讯时候,了解了redux,然后就是react-redux: 抽象后,视图完全由对象决定,而用户只能接触视图,所以对象的改变必 ...

  6. vscode + electron 提示:无法连接到legacy请采用inspector解决办法

    首先,你的程序是可以直接运行的,在命令行中可以运行,只是在vsCode中,运行一段时间就被这个提示弹出. 解决方法: 先在launch.json 中加上"protocol":&qu ...

  7. 黑盒测试实践——day06

    一.任务进展情况 通过小组成员的共同努力,终于完成了此次“黑盒测试实践”任务.目前的主要任务将之前的文件汇总,整理出来.                             二.存在的问题 由于此 ...

  8. kubenetes master重启以后,服务异常排查

    k8s集群环境:三台机器,一台master,三个node(每台都安装node服务) 问题藐视:重启的时候,发现master的服务都能正常启动,但是就是不好使,看/var/log/message日志也没 ...

  9. Adobe Premiere Pro CS6 下载安装包成功

    Adobe Premiere Pro CS6 https://pan.baidu.com/s/1miBq59e 下载地址 安装方式 断网(必须):安装官方原版程序: 一.安装前先运行程序包的“必先运行 ...

  10. linux CentOS 安装 nginx

    官方网址:http://nginx.org/en/download.html 一.安装基础组件 yum install gcc-c++ yum install pcre yum install pcr ...