Ajax+jQuery selectpicker四级联动

Ajax+jQuery selectpicker四级联动

问题描述

引用selectpicker做四级联动时 第一级变化，后三级需要初始化，但是一直只能初始化相邻的下拉框，经过多番查找与调试，问题定位在

 function initLotId() {
        $("#lotId").html("<option value='' disabled selected style='display:none;'>lot ID</option>"); //相当于placeholder
        $('#lotId').selectpicker('refresh');
    }

初始化时需要下拉框给一个默认值，然后需要调用selectpicker的refresh。之前不知道时需要每级初始化时selectpicker都要refresh，后来尝试着用html原生<select>后发现是一级变后面全部恢复初始值时行的通的。

代码如下

复制代码请引用bootstrap, bootstrap-selectpicker等插件

<div class="container">
    <div class="row ">
        <div class="col-md-2">
            <select id="firstId" class="selectpicker form-control" data-live-search="true" onchange="getData('getsecondId','secondId')">
                <option value='' disabled selected style='display:none;'>First ID</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
        <div class="col-md-2">
            <select id="secondId" class="selectpicker form-control" data-live-search="true" onchange="getData('getthirdId','thirdId')">
                <option value='' disabled selected style='display:none;'>Second ID</option>
            </select>
        </div>
        <div class="col-md-2">
            <select id="thirdId" class="selectpicker form-control" data-live-search="true" onchange="getData('getforthId','forthId')">
                <option value='' disabled selected style='display:none;'>Third ID</option>
            </select>
        </div>
        <div class="col-md-2">
            <select id="forthId" class="selectpicker form-control" data-live-search="true">
                <option value='' disabled selected style='display:none;'>Forth</option>
            </select>
        </div>
        <!-- <div class="col-md-1">
            <button type="reset" class="btn btn-outline-dark col-12 form-control" οnclick="clearValue()"> Clear </button>
        </div> -->
        <div class="col-md-1">
            <button type="submit" class="btn btn-dark col-12 form-control" onclick="submitValue()">Submit</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    var width = ($('.container').width() - 100) / 2 + 'px';

    function initsecondId() {
        $("#secondId").html("<option value='' disabled selected style='display:none;'>Second ID</option>");
        $('#secondId').selectpicker('refresh');
    }
    function initthirdId() {
        $("#thirdId").html("<option value='' disabled selected style='display:none;'>Third ID</option>");
        $('#thirdId').selectpicker('refresh');
    }
    function initforthId() {
        $("#forthId").html("<option value='' disabled selected style='display:none;'>Forth</option>");
        $('#forthId').selectpicker('refresh');
    }

    function getData(url, id) {
        var data = {}
        if (id == 'secondId') {
            data = {
                firstId: $('#firstId').val()
            };
            initsecondId();
            initthirdId();
            initforthId();
        } else if (id == 'thirdId') {
            data = {
                firstId: $('#firstId').val(),
                secondId: $('#secondId').val()
            };
            initthirdId();
            initforthId();
        } else {
            data = {
                firstId: $('#firstId').val(),
                secondId: $('#secondId').val(),
                thirdId: $('#thirdId').val()
            };
            initforthId();
        }

        $.ajax({
            url: '/' + url + '',
            method: 'get',
            data: data,
            async: false,
            cache: false,
            dataType: 'json',
            success: function (result) {
                for (var i in result) {
                    var option = result[i];
                    $('#' + id + '').append(new Option(option, option));
                    $('#' + id + '').selectpicker('refresh');
                }
            }
        })
    }

  
</script>