使用Ajax为Select2设置选中项失效问题求助

你手动执行$('#voip').val('101001003').trigger('change');能正常选中选项，但Ajax回调里执行相同代码却失效——虽然alert显示返回的data是正确的101001003，大概率是Ajax返回的data带有多余空白字符（比如换行、空格、BOM头），导致和select选项的value无法精确匹配。

试试以下几种解决方法：

1. 对返回值做去空处理 #

在设置值之前，用trim()去掉字符串首尾的空白字符：

$.ajax({
    url:"ajax_voip.php?internal=1",
    method:"GET",
    success:function(data)
    {
        const targetVal = $.trim(data); // 去除首尾空白
        $('#voip').val(targetVal).trigger('change'); 
        console.log(targetVal); // 可在控制台查看处理后的值是否纯净
     }
})

2. 确保Select2已完成初始化 #

如果你的Select2是页面加载后动态初始化的，要保证Ajax回调执行时组件已经初始化完成。可以把初始化代码放在Ajax请求之前：

// 先初始化Select2组件
$('#voip').select2();

// 再发起Ajax请求
$.ajax({
    url:"ajax_voip.php?internal=1",
    method:"GET",
    success:function(data)
    {
        $('#voip').val($.trim(data)).trigger('change'); 
     }
})

3. 直接调用Select2的API设置值 #

也可以使用Select2专属的val()方法设置值，有时能解决兼容性问题：

$.ajax({
    url:"ajax_voip.php?internal=1",
    method:"GET",
    success:function(data)
    {
        $('#voip').select2('val', $.trim(data)).trigger('change.select2'); 
     }
})

另外要检查后端ajax_voip.php的输出，确保只返回纯101001003，不要有任何多余的echo内容、空格，或者PHP的警告/通知输出——这些都会导致返回的data不纯净，进而匹配失败。

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