Select2如何实现仅允许粘贴下拉列表已存在的多个值

你当前代码开启tags: true后默认允许用户创建下拉列表中不存在的新值，只需要补充对应配置拦截新标签创建逻辑即可，不需要修改现有Razor视图代码。

核心修改逻辑 #

• 保留tokenSeparators配置，支持逗号、空格自动拆分粘贴的多值内容
• 通过createTag回调拦截新标签创建逻辑，直接返回null禁止生成不存在的选项
• 可选配置精确匹配规则，避免模糊匹配导致的误选问题

修改后完整JavaScript代码 #

$(function() {
    // 初始化Select2控件
    $('.select2').select2({
        tags: true,
        tokenSeparators: [',', ', ', ' '],
        // 禁止创建下拉列表中不存在的新值
        createTag: function() {
            return null;
        },
        // 可选：配置精确匹配规则，拆分后的值仅和选项文本完全一致才会被选中
        matcher: function(params, data) {
            if ($.trim(params.term) === '') return data;
            if (typeof data.text === 'undefined') return null;
            return data.text.toLowerCase().trim() === params.term.toLowerCase().trim() ? data : null;
        }
    })
})

实现效果 #

• 支持用户粘贴以逗号、空格分隔的多个值，控件会自动拆分内容
• 拆分后的单值仅会匹配下拉列表内已存在的选项，匹配成功自动选中
• 列表中不存在的值会被直接忽略，不会生成新的下拉选项

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