zoukankan      html  css  js  c++  java
  • Bootstrap select 多选并获取选中的值


    代码:

    <!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>
     

  • 相关阅读:
    【LibreOJ】#539. 「LibreOJ NOIP Round #1」旅游路线
    【LibreOJ】#541. 「LibreOJ NOIP Round #1」七曜圣贤
    【LibreOJ】#538. 「LibreOJ NOIP Round #1」数列递推
    【Atcoder】ARC084 Small Multiple
    【BZOJ】4430: [Nwerc2015]Guessing Camels赌骆驼
    【NOIP】提高组2013 火柴排队
    OpenCV常用基本处理函数(8)图像变换
    OpenCV常用基本处理函数(7)图像金字塔和直方图
    OpenCV常用基本处理函数(6)图像梯度
    OpenCV常用基本处理函数(5)图像模糊
  • 原文地址:https://www.cnblogs.com/zhuyeshen/p/11984462.html
Copyright © 2011-2022 走看看