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的控件.

最后的效果如下.