bootstrap-select級聯方式,從遠程獲取數據

 

bootstrap-select是沒有遠程獲取數據的例子的,但是經過一番研究,還是能實現的.

比如我們一般在頁面會使用兩個下拉框作爲級聯,比如我的場景是根據系統列表,點擊某個系統的時候把所有的ip列出來,提供選擇.

bootstrap-select我用的是最新版,支持bootstrap4,各位去GitHub下載即可.

<div class="col" style="width: 400px">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="sys-addon">系統列表</span>
                </div>
                <select class="form-control selectpicker" id="appsId" data-style="btn-sm btn-outline-info" data-size="5"
                        data-live-search="true" title="系統列表" aria-label="appsId" aria-describedby="sys-addon"></select>
            </div>
        </div>

        <div class="col">
            <div class="input-group input-group-sm">
                <select class="form-control selectpicker" id="ipId" data-style="btn-sm btn-outline-info" data-size="5"
                        data-live-search="true" title="IP列表"></select>
            </div>
        </div>

這裏要注意的是select標籤千萬別用 <select/>直接結束,得寫完整<select></select>,否則第二個select是無法顯示的,我就是想幹淨代碼,害我整了幾個小時才發現原因.因爲要去遠程獲取下拉數據,所以<option>標籤不用.

JS代碼如下

function changedSysSelect() {
    $('#appsId').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        var v = $('#appsId').selectpicker('val');
        var appInfoList = new Array();
        appInfoList = JSON.parse(sessionStorage.getItem(v));
        var html = '';
        for (var i = 0; i < appInfoList.length; i++) {
            var ip = appInfoList[i];
            html += '<option value="' + ip + '">' + ip + '</option>';
        }

        $('#ipId').html(html);
        //必須加，刷新select
        $('#ipId').selectpicker('refresh');

    });
}



function getSessionKeys() {
    $.ajax({
        url: 'ssh/getAppInfo',
        success: function (resp) {
            if (resp.success) {
                var map = resp.data;
                var html = '';
                for (var key in map) {
                    html += '<option value="' + key + '">' + key + '</option>';

                    var objList = map[key];
                    var appInfoList = new Array();

                    for (var i = 0; i < objList.length; i++) {
                        appInfoList[i] = objList[i].ip;
                    }
                    console.log(JSON.stringify(appInfoList));
                    sessionStorage.setItem(key, JSON.stringify(appInfoList));
                }

                $('#appsId').html(html);
                //必須加，刷新select
                $('#appsId').selectpicker('refresh');

                changedSysSelect();
            }
        },
        error: function (e) {
            console.log(e);
        }
    });
}

getSessionKeys();

主要用的就是這兩句

$('#ipId').html(html);
$('#ipId').selectpicker('refresh');

意思就是重新刷新一下select的控件.

最後的效果如下.