代码:

<!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. git 出现 fatal: remote origin already exists 错误

    当输入$ git remote add origin git@github.com:djqiang(github帐号名)/gitdemo(项目名).git 出现 如下错误: 解决办法如下: 1.先输入 ...

  2. JavaScript仿百度图片浏览效果(转载)

    转载来源:https://www.jb51.net/article/98030.htm 这是一个非常好的案例,然而jquery的时代正在徐徐关闭. 当你调整浏览器宽高,你会发现它不是自适应的.当你想把 ...

  3. ConcurrentLinkedQueue (一)

    ConcurrentLinkedQueue 主要讲一下在JDK8中,ConcurrentLikedQueue是如何入队,出队的. 首先我们要明白,ConcurrentLikedQueue是一种安全的没 ...

  4. layui.table前端+后台处理+分页

    前端 注:监听工具条没有详细写,但路子一样的 @section head{ <script src="~/Content/jquery-easyui-1.5.5.4/jquery.ea ...

  5. redis键过期 (redis 2.6及以上)

    EXPIRE key seconds 用来对一个键设置一个过期时间,第二个参数表示经过多少秒后键过期. 一个键过期后, 这个键将会被自动删除. 在Redis术语中,带有过期时间的键经常被称作volat ...

  6. Docker 容器介绍

    Docker 容器介绍 Docker 是一个基于 Go 语言的开源应用容器引擎,它既能实现虚拟化,又可用于将应用服务打包成轻量.可移植的容器,从而可以发布到任何 Linux 平台.除了优秀了沙箱机制外 ...

  7. python代码组织及模块使用

    python代码组织 python和其他编程语言一样,采用包管理代码,一个包中可包含许多模块. 使用模块最大的好处是大大提高了代码的可维护性.其次,编写代码不必从零开始.当一个模块编写完毕,就可以被其 ...

  8. [https][tls] 如何使用wireshark查看tls/https加密消息--使用私钥

    之前总结了使用keylog进行https流量分析的方法: [https][tls] 如何使用wireshark查看tls/https加密消息--使用keylog 今天总结一下使用服务器端证书私钥进行h ...

  9. Flink原理(四)——任务及调度

    本文是博主阅读官网文档.博客及书籍后自己所思所得,若是存在有误的地方,欢迎留言分享,谢谢! 一.任务调度 Flink是通过task slot的来定义执行资源的,为优化资源的利用率,Flink通过slo ...

  10. (Linux基础学习)第五章:Linux中的screen应用

    第1节:安装screen1.加载系统镜像文件,因为screen的安装包在系统镜像文件中图001 2.列出系统上所有的磁盘[root@centos6 ~]# lsblk图002 3.安装screen应用 ...