jQuery select2从返回数据设置默认值异常，疑似Strings.create代码错误

问题原因 #

• 1. 变量执行顺序错误：你调用Strings.create()方法的代码，写在了Strings对象的定义代码之前。JS代码是从上到下逐行执行的，调用Strings.create时Strings还未完成赋值，处于undefined状态，方法调用直接报错，导致请求URL生成失败，ajax请求地址非法自然返回空数据。
• 2. 服务端标签未解析：你URL里的<?=$base_url.$page?>是PHP短输出标签，只有写在.php后缀的文件内才会被服务端解析为实际地址，如果这段JS代码写在独立的.js文件或者静态HTML文件中，这个标签会原样保留，最终请求的URL不符合预期，导致接口请求失败。
• 3. 缺少返回格式声明：ajax请求没有指定dataType: 'json'，如果接口返回的响应头不符合JSON格式要求，jQuery不会自动将返回内容解析为对象，会导致data为字符串或空值。
• 4. Option构造参数顺序错误：new Option()的参数顺序为(显示文本, 值, 默认选中, 选中状态)，你原来写的new Option(data.id, data.text, true, true)参数顺序颠倒，会导致选项显示异常，就算接口返回正常也无法正确渲染选中效果。

修复方案 #

1. 调整代码执行顺序，将Strings对象的定义放到最前面
2. 确认PHP标签可正常解析，若无法解析则提前把服务端参数输出到全局变量调用
3. 给ajax加上JSON格式声明，新增URL打印调试方便排查问题
4. 修正Option参数顺序，简化select2赋值逻辑，避免多余事件触发冲突

修复后代码 #

// 先定义Strings工具对象
var Strings = {
  create : (function() {
    var regexp = /{([^{]+)}/g;
    return function(str, o) {
      return str.replace(regexp, function(ignore, key){
        return (key = o[key]) == null ? '' : key;
      });
    }
  })()
};

var file_bast = String(result.file_bast);
// 若PHP标签无法解析，替换为提前在PHP文件中定义的全局变量，比如 window.baseConfig.baseUrl + window.baseConfig.page
var fileid = Strings.create("<?=$base_url.$page?>/data/fetch_data_file_update/{filebast}", {filebast:file_bast});
// 打印生成的URL，可直接复制到浏览器地址栏访问，验证接口是否正常返回数据
console.log('请求地址：', fileid);

$.ajax({
  type: 'GET',
  url: fileid,
  dataType: 'json' // 强制jQuery将返回结果解析为JSON格式
}).then(function (data) {
  console.log('接口返回数据：', data);
  // 先判断数据是否合法，避免报错
  if(data && data.id && data.text) {
    $('#file_bast').append(new Option(data.text, data.id, true, true)).trigger('change');
  }
});

内容的提问来源于stack exchange，提问作者Farah Hana Zhafirah