效果图：

HTML：

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>下拉框多选</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >

    <script type='text/javascript' th:src='@{/ecej/core/jquery-3.2.0.min.js}'></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>

    <link rel='stylesheet' type="text/css" th:href='@{/core/bootstrap-select-1.13.14/bootstrap-select.min.css}'/>

    <script type='text/javascript' th:src='@{/core/bootstrap-select-1.13.14/bootstrap-select.js}'></script>

    <script type='text/javascript' th:src='@{/multipleSelect.js}'></script>

</head>

<body>

<fieldset>

    <legend>bootstrap</legend>

    <div class="form-controls" style="width: 300px;">

        <select class="selectpicker show-tick form-control" multiple="multiple" title="请选择工厂" data-size="10"

                data-selected-text-format="count > 15"

                data-live-search="true" data-live-search-placeholder="搜索"

                data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="重置"

                id="xinghao_id" name="xinghao_id" value="{$info.xinghao_id}">

        </select>

    </div>

</fieldset>

<hr/>

<button id="btn">获取</button>

</body>

</html>

自定义 JS：

$(function () {

    // 获取

    $("#btn").click(function () {

        var _vals = $("#xinghao_id").val();

        console.log(_vals)

    });

    var _option = "";

    for (var i = 0; i < 100; i++) {

        _option += '<option value="' + i + '">' + '测试' + i + '</option>';

    }

    $("#xinghao_id").append(_option);

    // 动态追加元素需要 重新刷新渲染

    $('.selectpicker').selectpicker('refresh');

});

需把对应bootstrap-select 相关文件URL引入替换；可直接使用

常用属性介绍：

1、class="selectpicker" 普通的下拉框功能

2、title="请选择城市名称" title的作用与palcehoder一样。

3、select class="selectpicker" multiple selectpicker和multiple属性的搭配使用可实现多选

4、data-live-search="true" 这个属性的默认值是false,作用是打开模糊筛查搜索框。

5、data-max-options 这个属性表示最多可选几个，搭配multiple使用，用法：data-max-options=“2”，表示最多选两个。

6、data-selected-text-forma缩略模式， 用法：data-selected-text-format="count > 3"，当选中值大于3个的时候只显示选中项的个数，注意只对多选生效。

7、data-style 表示默认选中样式，用法：data-style="btn-primary"，属性值就是bootstrap的按钮样式。

8、data-size data-size="6",表示下拉框显示的下拉列表数量 超出条数后出现滚动条。

9、data-dropup-auto="false"， 表示下拉框默认向下展开；"true"，表示下拉框默认向下展开；"auto"，（默认值）表示下拉框根据页面尺寸自动向下或向上展开。

10、$('.selectpicker').selectpicker('selectAll'); 全选

$('.selectpicker').selectpicker('deselectAll'); 反选：

$('.selectpicker').selectpicker('mobile'); 适应手机模式：

11、给下拉框赋初始值   .selectpicker:eq(0)表示该页面或者该表单的第几个使用了第几个selectpicker属性的input标签。

$('.selectpicker:eq(0)').selectpicker('val',valArea);

$('.selectpicker:eq(1)').selectpicker('val',valPost);

$('.selectpicker:eq(2)').selectpicker('val',valBank);

$('.selectpicker').selectpicker('refresh');

$('.selectpicker').selectpicker('render');

12、与angular或者knockout合用问题：

　　即下拉框无法显示出选项，但实际上，按下F12去查看时，又明显的有这些选项值，只是页面无法展示。

　　a. 添加Js：(只有在编译之后第一次进入页面的时候生效，一旦刷新之后就失效(因为angular异步加载)
　　$(function () {

　　　　$('.selectpicker').selectpicker('refresh');
　　　　$('.selectpicker').selectpicker('render');
　　})

更多资料：

1）：核心选择：可以通过数据属性或JavaScript传递选项。对于数据属性，附加选项名称  data-，如  data-style="" 或  data-selected-text-format="count"。

2）：大事记变迁：Bootstrap-select公开了一些事件以供选择功能使用。

hide.bs.select，hidden.bs.select，show.bs.select和showd.bs.select都具有一个  relatedTarget 属性，其值是切换锚元素。

$('#mySelect').on('hidden.bs.select', function (e) {

  // do something...

});

传送门官网地址：https://developer.snapappointments.com/bootstrap-select/examples/

Bootstrap++：bootstrap-select 使用的更多相关文章

  1. vue和bootstrap的select控件貌似有冲突？

    貌似vue和bootstrap的select控件会冲突,因为bootstrap的select控件会将option替换为<a>标签,这样就会导致vue渲染失败.(这个问题让我整了一个上午,最 ...

  2. 基于bootstrap的select(可多选)

    如图:

  3. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  4. [bootstrap] bootstrap 简介和相关网址

    Bootstrap 来自 Twitter,是目前很受欢迎的前端框架. 基于 HTML.CSS.JAVASCRIPT ,简洁灵活,使 Web 开发更加快捷. Bootstrap提供了优雅的HTML和CS ...

  5. [Bootstrap] Bootstrap学习笔记

    1.因为bootstrap用到了html5的特性,为了正常使用,需要在最开头加上<!DOCTYPE html> 2.Bootstrap需要JQuery才能正常工作,所以需要导入jquery ...

  6. GitHub托管BootStrap资源汇总（持续更新中…）

    Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...

  7. 35 个必须有的Bootstrap工具和生成器

    Bootstraptor If you think that bootstrap templates are not enough for you, you should go with bootst ...

  8. GitHub托管BootStrap资源汇总

    MESSENGER替换alert()消息和其他用户交互通知. JQUERY.TOCIFY.JS可以用Bootstrap或jQueryUI主题的Jquery表格组件. BOOTSTRAP-PROMPTS ...

  9. 第87节：Java中的Bootstrap基础与SQL入门

    第87节:Java中的Bootstrap基础与SQL入门 前言复习 什么是JQ? : write less do more 写更少的代码,做更多的事 找出所有兄弟: $("div" ...

  10. bootstrap treeview实现菜单树

    本博客,介绍通过Bootstrap的treeview插件实现菜单树的功能. treeview链接:http://www.htmleaf.com/Demo/201502141380.html ORM框架 ...

随机推荐

  1. Zookeeper-Access Control List(ACL)

    概述 Z K作为一个分布式协调框架.内部存储着一些分布式系统运行时状态的元数据.如何有效的保护这些数据的安全.如何做一个比较好的权限控制显得非常的重要. ZK 为我们提供一套完善的 ACL(acces ...

  2. 使用TransferLearning实现环视图像的角点检测——yolo_v3_tiny

    本文选取yolov3-tiny,使用pretrained weights,实现环视图像中的角点等关键目标检测. 大神镇楼: https://pjreddie.com/darknet/yolo/ 配置参 ...

  3. Redis为何是单线程的

    以前一直有个误区,以为:高性能服务器 一定是 多线程来实现的 原因很简单因为误区二导致的: 多线程 一定比 单线程 效率高.其实不然. redis 核心就是 如果我的数据全都在内存里,我单线程的去操作 ...

  4. 网页不让用户复制方法总汇,设置html禁止选择，保护源码，js禁止复制文字

    这篇文章主要讲解:右键复制失效方法.菜单"文件"-"另存为"失效方法.防止查看源代码进行复制的方法.防止页面缓存的方法.来达到一定的代码保护效果 右键复制失效方 ...

  5. flex布局语法+实例

    一.什么是flex布局 flex 是 flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 flex 布局.你可以将前端页 ...

  6. UVA - 11300 Spreading the Wealth（数学题）

    UVA - 11300 Spreading the Wealth [题目描述] 圆桌旁边坐着n个人,每个人有一定数量的金币,金币的总数能被n整除.每个人可以给他左右相邻的人一些金币,最终使得每个人的金 ...

  7. 记一道CTF隐写题解答过程

      0x00 前言 由于我是这几天才开始接触隐写这种东西,所以作为新手我想记录一下刚刚所学.这道CTF所需的知识点包括了图片的内容隐藏,mp3隐写,base64解密,当铺解密,可能用到的工具包括bin ...

  8. Linux多任务编程之六：编写多进程程序及其代码（转）

    来源:CSDN  作者:王文松  转自Linux公社 ------------------------------------------------------------------------- ...

  9. day29 继承

    目录 一.property装饰器 应用场景1 应用场景2 应用场景3(场景2优化) 二.继承介绍 1 语法 2 属性查找 3 继承的实现原理 3.1 菱形问题 3.2 继承原理 3.3 深度优先和广度 ...

  10. 题解：2018级算法第三次上机 C3-Zexal的浩瀚星辰

    题目描述: 样例: 实现解释: 一道结合了火箭发射的贪心题目 知识点: 贪心,优先队列 题目分析: 根据题目描述可知,延迟后时间是正常推进的,也就是假设共有n个火箭,推迟k小时.则在到达k+1小时时, ...