Laravel中使用Select2联动下拉框出现数据重复的解决求助

问题描述 #

已实现省份选择联动地点名称功能，省份数据展示与获取正常，但地点下拉框出现重复数据（数据库中无重复记录）。

相关代码 #

view.blade 中的JS代码

$(document).ready(function() {

            $("#selectProv").select2({
                placeholder:"Pilih Provinsi",
                ajax: {
                    url: "{{ route('advance.provinsi') }}",
                    processResults: function({data}){
                        console.log(data);
                        return {
                            results: $.map(data, function(item){
                                return {
                                    id: item.id,
                                    text: item.provinsi
                                }
                            })
                        }
                    }
                }
            });

            $("#selectProv").change(function() {
                let id = $('#selectProv').val();
                
                $("#selectLoc").select2({
                    placeholder:"Pilih Lokasi",
                    ajax: {
                        url: "{{ url('/selectLoc') }}/" + id,
                        processResults: function({data}){
                            console.log(data);
                            return {
                                results: $.map(data, function(item){
                                    // console.log(item);
                                    return {
                                        id: item.id,
                                        text: item.lokasi
                                    }
                                })
                            }
                        }
                    }
                });
                
            });  

});

Controller 代码

class locationController extends Controller
{
    public function provinsi() {
        $prov = Provinsi::where('provinsi', 'LIKE', '%'.request('q').'%') -> orderBy('provinsi','asc') -> paginate(50);

        return response() -> json($prov);
    }

    public function lokasi($id) {
        $lokasi = Lokasi::where('provinsi_id', $id) -> where('lokasi', 'LIKE', '%'.request('q').'%') -> orderBy('lokasi','asc') -> paginate(50);

        return response() -> json($lokasi);
    }
}

问题原因 #

每次省份选择变化时，都重复调用$("#selectLoc").select2()初始化下拉框，导致Select2实例被多次创建，此前加载的选项未被清空，新选项叠加后出现重复。

解决方案 #

方案一：单次初始化+动态刷新（推荐） #

只在页面加载时初始化地点下拉框，通过动态修改AJAX地址、触发刷新来更新数据，避免重复实例化：

$(document).ready(function() {
    // 初始化省份下拉框
    $("#selectProv").select2({
        placeholder:"Pilih Provinsi",
        ajax: {
            url: "{{ route('advance.provinsi') }}",
            processResults: function({data}){
                return {
                    results: $.map(data, function(item){
                        return {
                            id: item.id,
                            text: item.provinsi
                        }
                    })
                }
            }
        }
    });

    // 提前初始化地点下拉框，配置动态URL
    $("#selectLoc").select2({
        placeholder:"Pilih Lokasi",
        ajax: {
            url: function() {
                let provId = $('#selectProv').val();
                return "{{ url('/selectLoc') }}/" + (provId || '');
            },
            processResults: function({data}){
                return {
                    results: $.map(data, function(item){
                        return {
                            id: item.id,
                            text: item.lokasi
                        }
                    })
                }
            }
        },
        // 初始禁用，选择省份后启用
        disabled: true
    });

    $("#selectProv").change(function() {
        let id = $(this).val();
        // 启用/禁用地点下拉框
        $("#selectLoc").prop('disabled', !id);
        // 清空现有选项并触发重新加载
        $("#selectLoc").val(null).trigger('change');
    });  
});

方案二：销毁旧实例后重新初始化 #

如果需要保留原有逻辑，可在每次初始化前销毁已存在的Select2实例：

$("#selectProv").change(function() {
    let id = $('#selectProv').val();
    
    // 销毁已有的Select2实例
    if ($("#selectLoc").data('select2')) {
        $("#selectLoc").select2('destroy');
    }
    
    $("#selectLoc").select2({
        placeholder:"Pilih Lokasi",
        ajax: {
            url: "{{ url('/selectLoc') }}/" + id,
            processResults: function({data}){
                return {
                    results: $.map(data, function(item){
                        return {
                            id: item.id,
                            text: item.lokasi
                        }
                    })
                }
            }
        }
    });
});

说明 #

方案一性能更优，仅初始化一次Select2实例，同时通过禁用状态引导用户操作，提升体验；方案二适合快速修改现有代码，但多次销毁/创建实例可能带来额外性能开销。

内容的提问来源于stack exchange，提问作者Farhan Akmal Shaleh