代码：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 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>
    <title></title>
</head>
 
<body id="">
    <div class="form-group">
        <!-- <div class="title">
                            可选择多个指标
                    </div> -->
        <div class="centent1Select">
            <select id="usertype" title="可选择多个指标" onchange="centent1SelectOnchang(this)"
                class="selectpicker show-tick form-control" multiple data-live-search="false">
                <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>
                <option value="10">删除添加人数</option>
                <option value="11">分享次数</option>
                <option value="12">分享人数</option>
            </select>
        </div>
    </div>
    <script type="text/javascript">
        $(window).on('load', function () {
            $('#usertype').selectpicker({
                'selectedText': 'cat'
            });
        });
        //取出选择的任务执行人的方法
        function centent1SelectOnchang() {
            var val = "", staffs = [];
            //循环的取出插件选择的元素(通过是否添加了selected类名判断)
            for (var i = 0; i < $("li.selected").length; i++) {
                val = $("li.selected").eq(i).find(".text").text();
                if (val != '') {
                    staffs.push(val);
                }
            }
            console.log(staffs)
 
        }
    </script>
</body>
 
</html>

Bootstrap select 多选并获取选中的值的更多相关文章

  1. bootstrap select 多选的用法，取值和赋值（取消默认选择第一个的对勾）

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

  2. 2. select下拉框获取选中的值

    1.获取select选中的value值: $("#select1ID").find("option:selected").val();  --select1ID ...

  3. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. js获取checkbox复选框获取选中的选项

    js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...

  5. 微信小程序获取复选框全选，反选选中的值

    wxml文件 <view class="tr"> <view class="th"> <checkbox bindtap=&quo ...

  6. jQuery 实现复选框全选、反选及获取选中的值

    实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...

  7. Jquery判断单选框是否选中和获取选中的值

    第一种:利用选中值判断选中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  8. Bootstrap select多选下拉框实现代码

    前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没 ...

  9. 使用layui框架的select获取选中的值

    在使用时需要注意:select标签的外层需要加上类名".layui-form" 接下来就是根据需求来改变下拉框的内容了,直接给select的option重新赋一次值,记得加上对应的 ...

随机推荐

  1. spring boot 使用GraphQL

    在此之前需要简单了解GraphQL的基本知识,可通过以下来源进行学习 GraphQL官方中文网站 :https://graphql.cn GraphQL-java 官网:https://www.gra ...

  2. Springboot项目统一异常处理

    Springboot项目统一异常处理 一.接口返回值封装 1. 定义Result对象,作为通用返回结果封装 2. 定义CodeMsg对象,作为通用状态码和消息封装 二.定义全局异常类 三.定义异常处理 ...

  3. sql server 处理特殊字符问题

    对于中文版的SQL SERVER,默认安装后使用的默认排序规则为Chinese_PRC_CI_AS,在此排序规则下,使用varchar类型来可以“正常存取”存放中文字符以及一些东南亚国家的字符, 同时 ...

  4. 关于SqlServer数据库数据备份失败的问题

    当备份的失败,出现说什么应该支持多少个介质簇,但实际出现了多少介质簇,这个时候就要考虑备份的地址是不是出现问题. 首先,检查备份地址,是不是多于两个以上,那么在备份的时候应该注意,备份地址最好留一个, ...

  5. Java中重载(overloading)和重写(Overriding)的区别

    一:方法的重载 (1)方法重载指在类中定义方法名相同,参数不同的不同的多个方法(返回值类型可随意,不能以返回类型作为重载函数的区分标准). 参数不同表现: 1.参数的个数不同 2.参数的类型不同 3. ...

  6. python（open文件读取）

    一.open文件读取 1.open('file','mode')打开一个文件 file 要打开的文件名,需加路径(除非是在当前目录) mode 文件打开的模式 需要手动关闭close 2.with o ...

  7. Android笔记(六十三) android中的动画——逐帧动画（ frame-by-frame animation）

    就好像演电影一样,播放实现准备好的图片,来实现动画效果. 逐帧动画需要用到AnimationDrawable类,该类主要用于创建一个逐帧动画,然后我们把这个动画设置为view的背景即可. androi ...

  8. mysql学习之基础篇04

    五种基本子句查询 查询是mysql中最重要的一环,我们今天就来说一下select的五种子句中的where条件查询: 首先我们先建立一张商品表:goods 由于商品数目太多,我就不一一列举了. 在这里我 ...

  9. docker到底比LXC多了些什么

    看似docker主要的OS级虚拟化操作是借助LXC, AUFS只是锦上添花.那么肯定会有人好奇docker到底比LXC多了些什么.无意中发现 stackoverflow 上正好有人问这个问题, 回答者 ...

  10. js中绑定事件处理函数，使用event以及传递额外数据

    IE8中使用attachEvent绑定事件处理函数时,不能直接向event 对象添加数据属性.可以用属性复制的方法,包装新的event对象. 1. 属性复制var ObjectExtend = fun ...