$('.selectpicker').selectpicker('refresh');不工作答案

【问题标题】：$('.selectpicker').selectpicker('refresh'); not working$('.selectpicker').selectpicker('refresh');不工作
【发布时间】：2021-07-13 03:33:24
【问题描述】：

我正在尝试使用 bootstrap-select 和 laravel 7 来改进我的一个项目的样式，但是当动态构建选择的选项时，插件不起作用并且我没有发现错误。我已经按照这个答案的建议包含了$('.selectpicker').selectpicker('refresh');，但我仍然无法实现我想要的。 HTML 如下，完美运行：

刀片

<div class="col-md-6 mb-3">
    <label for="state_id">State</label>
    <select class="form-control selectpicker" id="state_id" name="state_id">
        @foreach($states as $state)
            <option value="{{ $state->id }}">{{ $state->name }}</option>
        @endforeach
    </select>
</div>
<div class="col-md-6 mb-3">
    <label for="city_id">City</label>
    <select class="form-control selectpicker" id="city_id" name="city_id">

    </select>
</div>

脚本

<script>
    $(document).on('change', '#state_id', function() {
        $('.selectpicker').selectpicker('refresh');
        let state_id = $(this).val();
        let select = $('#city_id');
        $.ajax({
            type: 'get',
            url: '{{ route('findIDState') }}',
            data: {'id':state_id},
            success: function(data){
                select.html('');
                for (var i = 0; i < data.length; i++){
                    select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
                }
            },
            error: function(){
                console.log('this is a error');
            },
        }

【问题讨论】：

标签： php jquery ajax laravel

【解决方案1】：

追加后刷新select2

<script>
    $(document).on('change', '#state_id', function() {
        $('.selectpicker').selectpicker('refresh');
        let state_id = $(this).val();
        let select = $('#city_id');
        $.ajax({
            type: 'get',
            url: '{{ route('findIDState') }}',
            data: {'id':state_id},
            success: function(data){
                select.html('');
                for (var i = 0; i < data.length; i++){
                    select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
                }
               $('.selectpicker').selectpicker('refresh');
            },
            error: function(){
                console.log('this is a error');
            },
        });
    }).trigger('change');
</script>

【讨论】：