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>
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM