Select2结合AJAX数据源无法选中选项问题求助

你的问题核心是缺少必要配置来处理选中项的渲染，或元素类型选择不当。以下是具体修复方案：

方案1：改用元素（推荐） # Select2对<select>元素的默认支持更完善，替换后无需额外配置即可正常显示选中标签： <select name="organization" id="organization" placeholder="Organization"></select> 保留原JavaScript代码即可（也可添加processResults确保解析稳定）： jQuery('#organization').select2({ placeholder: 'Select an organization', ajax: { url: '/organizations.json', dataType: 'json', processResults: function(data) { return { results: data.results }; } } }); 方案2：继续使用元素（需补充配置） #

如果必须使用<input>，需要手动指定选中项和下拉选项的渲染逻辑：

jQuery('#organization').select2({
    placeholder: 'Select an organization',
    ajax: {
        url: '/organizations.json',
        dataType: 'json',
        processResults: function(data) {
            return { results: data.results };
        }
    },
    // 定义选中项的显示内容
    templateSelection: function(item) {
        return item.text || this.placeholder;
    },
    // 定义下拉选项的显示内容
    templateResult: function(item) {
        return item.text;
    },
    // 确保选中时将ID存入input的value属性
    escapeMarkup: function(markup) { return markup; }
});

额外注意事项 #

• 修复JSON中的语法错误：每个对象末尾的多余逗号（如"text": "Test Company",）需删除，否则可能导致JSON解析失败。
• 确保后端返回的results数组中，每个对象都包含id和text字段（你的JSON已满足，但需保持字段名正确）。

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