您的位置: 首页  >  IT文章  >  js前端 bootstrap select的使用

js前端 bootstrap select的使用

分类: IT文章 • 2022-08-04 00:03:20

1、资源

参考 JS组件系列——再推荐一款好用的bootstrap-select组件，亲测还不错

bootstrap select resources.zip下载

2、代码

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>bootstrap select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
    <meta http-equiv="Expires" content="0"/>
    <link th:href="@{/js/plugins/bootstrap-3.4.1-dist/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{/js/plugins/bootstrap-select-1.13.14/dist/css/bootstrap-select.css}" rel="stylesheet"/>
    <style type="text/css">
        .left {
            float: left;
        }

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="top-right left">
        <div class="left" style=" 100%;height: 100%;">
            <div class="left" style=" 25%;height: 100%;margin-top: 2%;">
                <div class="col-sm-10">
                    <select >
                        <option value="实时">实时</option>
                        <option value="详细">详细</option>
                        <option value="统计">统计</option>
                    </select>
                </div>
            </div>
            <div class="left" style=" 60%;height: 100%;margin-top: 2%;">
                <div class="col-sm-10">
                    <select >
                        <option value="AA1">AA1</option>
                        <option value="AA2">AA2</option>
                        <option value="AA3">AA3</option>
                    </select>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/bootstrap-select-1.13.14/dist/js/bootstrap-select.min.js}"></script>
<script type="text/javascript">
    $('document').ready(function () {
        setProvince();
    })
    var datas = [{
        pro: "实时",
        citys: ["AA1", "AA2", "AA3"]
    }, {
        pro: "详细",
        citys: ["BB1", "BB2", "BB3"]
    }, {
        pro: "统计",
        citys: ["CC1", "CC2"]
    }];

    function setProvince() {
        setCity();
        cityChange();
        $('#pro').on('changed.bs.select', function (e) {
            setCity();
            localStorage.setItem("pro", $("#pro").val());
        });
        var pro = localStorage.getItem("pro");
        if (pro != null) {
            $('#pro').selectpicker('val', pro);
        }
        var cityName = localStorage.getItem("cityName");
        $('#city').next().find(".filter-option-inner-inner").text(cityName);
    }

    function setCity() {
        $("#city option").remove();
        var datas_citys = []; //存放选择省份对应的城市
        //获取当前选择的省份
        var pro = $("#pro").val(); /*p的值是下拉列表框选择的城市 */
        for (var i in datas) {
            if (datas[i].pro == pro) {
                datas_citys = datas[i].citys;
                break; /*跳出循环，节省效率 */
            }
        }
        //根据datas_citys数组的内容
        /*2 把城市封装到option 把option添加到城市的select */
        for (var i in datas_citys) {
            var op = $("<option value='" + i + "'>" + datas_citys[i] + "</option>")
            $("#city").append(op);
        }
        //插件原因 需重绘UI
        $('#city').selectpicker('refresh');

        // var proStorage = localStorage.getItem("pro");
        // if (proStorage == pro) {
        //     var city = localStorage.getItem("city");
        //     if (city >= 0) {
        //         // var cityName = localStorage.getItem("cityName");
        //         // $('#city').attr('title', cityName);
        //     }
        // } else {
        //     // $('#city').attr('title', cityName);
        // }
    }

    function cityChange() {
        $('#city').on('changed.bs.select', function (e) {
            var city = $("#city").val();
            localStorage.setItem("city", city);
            var cityName = $('#city option:selected').text();
            localStorage.setItem("cityName", cityName);
            var url = getUrlBySelectName(cityName);
            console.log("url", url)
            // location.href = url;
        });
    }

    function getUrlBySelectName(selectName) {
        var url = "/tcc/front/ScraperRealtime";
        switch (selectName) {
            case "AA1":
                url = "/tcc/front/PickupRealtime";
                break;
            case "AA2":
                url = "/tcc/front/ScraperRealtime";
                break;
            case "AA3":
                url = "/tcc/front/CoalControl";
                break;

            case "BB1":
                url = "/tcc/front/PickupDetail";
                break;
            case "BB2":
                url = "/tcc/front/ScraperDetail";
                break;
            case "BB3":
                url = "/tcc/front/PIDDetail";
                break;

            case "CC1":
                url = "/tcc/front/PickupStatis";
                break;
            case "CC2":
                url = "/tcc/front/ScraperStatis";
                break;
        }
        return url;
    }
</script>
</body>
</html>

相关推荐