如何为Ajax加载的Select2国家下拉框设置USA为默认选中值？

我有一个通过Ajax从数据库加载选项的表单，当前下拉框默认显示“SELECT COUNTRY OPTION”，希望将默认值设置为USA，但尝试多种方法均未成功。

核心JS代码 #

function cdp_load_countries(modal) {

    $("#country" + modal).select2({
        ajax: {
            url: "ajax/select2_countries.php",
            dataType: 'json',

            delay: 250,
            data: function (params) {
                return {
                    q: params.term // search term
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        placeholder: translate_search_country,
        allowClear: true
    }).on('change', function (e) {

        var country = $("#country" + modal).val();

        $("#state" + modal).attr("disabled", true);
        $("#state" + modal).val(null);

        if (country != null) {
            $("#state" + modal).attr("disabled", false);
        }

        cdp_load_states(modal);
    });
}

PHP代码 #

<?php
require_once("../loader.php");
$db = new Conexion; 
$sWhere = '';
if (isset($_REQUEST['q'])) {
    $search = cdp_sanitize($_REQUEST['q']);
    $sWhere = "and  name LIKE '%" . $search . "%'";
}
$list = array();
$data = [];

$sql = "SELECT * FROM cdb_countries where is_active=1 $sWhere";
$db->cdp_query($sql);
$db->cdp_execute();

$datas = $db->cdp_registros();

foreach ($datas as $key) {

    $data[] = array('id' => $key->id, 'text' => $key->name);
}

echo json_encode($data);

?>

Select2的AJAX模式下选项是动态加载的，默认不会自动包含未搜索过的选项，需要手动添加默认选项并触发选中状态，具体两种实现方式如下：

方法1：硬编码USA的ID（适合ID固定场景） #

修改JS函数，在Select2初始化完成后添加USA选项并设置选中：

function cdp_load_countries(modal) {
    $("#country" + modal).select2({
        ajax: {
            url: "ajax/select2_countries.php",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term // search term
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        placeholder: translate_search_country,
        allowClear: true
    }).on('change', function (e) {
        var country = $("#country" + modal).val();
        $("#state" + modal).attr("disabled", true);
        $("#state" + modal).val(null);
        if (country != null) {
            $("#state" + modal).attr("disabled", false);
        }
        cdp_load_states(modal);
    });

    // 设置USA为默认选中项，替换usaId为数据库中USA的实际ID
    var usaId = 1; 
    var usaText = 'USA';
    $("#country" + modal).append(new Option(usaText, usaId, true, true)).trigger('change.select2');
}

方法2：动态获取USA的ID（灵活适配ID变化） #

如果不确定USA的ID，先通过AJAX查询获取信息再设置选中：

function cdp_load_countries(modal) {
    $("#country" + modal).select2({
        ajax: {
            url: "ajax/select2_countries.php",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term // search term
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        placeholder: translate_search_country,
        allowClear: true
    }).on('change', function (e) {
        var country = $("#country" + modal).val();
        $("#state" + modal).attr("disabled", true);
        $("#state" + modal).val(null);
        if (country != null) {
            $("#state" + modal).attr("disabled", false);
        }
        cdp_load_states(modal);
    });

    // 动态查询USA信息并设置选中
    $.ajax({
        url: "ajax/select2_countries.php",
        dataType: 'json',
        data: { q: 'USA' },
        success: function(data) {
            if(data.length > 0) {
                var usaOption = data[0];
                $("#country" + modal).append(new Option(usaOption.text, usaOption.id, true, true)).trigger('change.select2');
            }
        }
    });
}

注意事项 #

• 确保数据库中存在is_active=1的USA记录
• 方法1中的usaId必须替换为数据库中USA的真实ID
• 使用trigger('change.select2')而非普通change，能确保Select2正确更新UI并触发关联逻辑（比如加载州的操作）

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