编辑模式下如何为AJAX远程数据的Select2设置选中值

我知道这可能是重复问题，但现有答案均不适用。我在Blade模板中设置了隐藏输入字段：

<input type="hidden" value="{{ $recipe->cuisine_type_id }}" id="selectedCuisineTypeId">

我的场景类似，以下是我的JS代码：

var selectedCuisineTypeId = $("#selectedCuisineTypeId").val();
$('#cuisine_type_id').val(selectedCuisineTypeId).trigger('change');

$( "#cuisine_type_id" ).select2({
    ajax: {
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    placeholder: "Select Cuisine",
    url: "{{ route('ajax-cuisine-search') }}",
    type: "post",
    dataType: 'json',
    delay: 250,
    data: function (params) {
        return {
        search: params.term // search term
        };
    },
    processResults: function (response) {
        return {
            results: response
        };
    },
    cache: true
    }
});

请问这段代码为何无法生效？我遗漏了什么？

你的代码有两个核心问题：

• 初始化顺序错误：先给元素设值再初始化Select2，插件还未挂载时，val()和trigger('change')不会被Select2识别，等于无效操作。
• AJAX模式缺少选项数据：Select2的AJAX模式仅在用户搜索时请求接口，它不知道你要设置的ID对应什么选项文本，必须手动将该选项添加到下拉框，才能正常显示选中状态。

修正后的代码 #

方案1：通过额外AJAX请求获取选中项详情

// 第一步：先初始化Select2插件
$("#cuisine_type_id").select2({
    ajax: {
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        placeholder: "Select Cuisine",
        url: "{{ route('ajax-cuisine-search') }}",
        type: "post",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                search: params.term
            };
        },
        processResults: function (response) {
            return {
                results: response
            };
        },
        cache: true
    }
});

// 第二步：设置选中值
var selectedId = $("#selectedCuisineTypeId").val();
if (selectedId) {
    // 后端需新增根据ID查询单个菜品类型的接口，比如ajax-cuisine-get
    $.ajax({
        url: "{{ route('ajax-cuisine-get') }}",
        type: "post",
        dataType: 'json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: { id: selectedId },
        success: function (cuisine) {
            // 创建选项并添加到下拉框，同时标记为选中
            var option = new Option(cuisine.text, cuisine.id, true, true);
            $("#cuisine_type_id").append(option).trigger('change');
        }
    });
}

方案2：直接用Blade变量传递选中项文本（无需额外AJAX）

如果$recipe已关联cuisine_type模型，可直接在页面渲染时获取选项文本，省去额外请求：

// 先初始化Select2
$("#cuisine_type_id").select2({
    ajax: {
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        placeholder: "Select Cuisine",
        url: "{{ route('ajax-cuisine-search') }}",
        type: "post",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                search: params.term
            };
        },
        processResults: function (response) {
            return {
                results: response
            };
        },
        cache: true
    }
});

// 直接用Blade变量创建选项
var selectedId = "{{ $recipe->cuisine_type_id }}";
var selectedText = "{{ $recipe->cuisine_type->name }}"; // 假设菜品类型有name字段，对应Select2的text属性
if (selectedId) {
    var option = new Option(selectedText, selectedId, true, true);
    $("#cuisine_type_id").append(option).trigger('change');
}

关键注意点 #

• 后端返回的单个菜品类型数据，必须包含id和text两个字段（和搜索接口返回的结果格式一致）。
• 必须在Select2初始化完成后，再进行选中状态的设置操作。

内容的提问来源于stack exchange，提问作者iAmBorgy