Select2自定义标签未触发AJAX存库问题求助

问题分析 #

你当前的问题核心在于：启用Select2的tags: true后，回车添加自定义标签时，Select2会自动在原生select中插入一个value与文本一致的临时option，导致onchange触发时，isInDropdown判断结果为true，直接跳过了AJAX逻辑。另外，原生onchange、oninput等事件在Select2的封装下，无法精准捕捉自定义标签的创建时机。

修复方案 #

使用Select2官方提供的select2:selecting事件（选中操作完成前触发），结合Select2的内置数据适配器判断当前选中项是否为自定义标签，再执行AJAX保存逻辑。

修改后的代码 #

HTML（移除原生onchange事件）

<div class="col-md-6 ">
    <label class="form-label">Type <span class="required">*</span></label> <br>
    <select class="selectType" name="project_types[]" multiple="multiple" style="height: 200px; width: 100%;">
        <?php
        if (!empty($types)) {
            foreach ($types as $type) {
                echo '<option value="' . $type->ID . '">' . $type->name . '</option>';
            }
        }
        ?>
    </select>
</div>

JavaScript

$(".selectType").select2({
    tags: true,
    tokenSeparators: [',', ' '] // 可选：支持逗号/空格快速添加标签
}).on('select2:selecting', function(e) {
    const selectElement = this;
    const selectedItem = e.params.args.data;

    // 判断是否为自定义标签：原生选项中无对应value的选项
    const isCustomTag = !$(selectElement).find(`option[value="${selectedItem.id}"]`).length;

    if (isCustomTag && selectedItem.text.trim() !== '') {
        // 阻止Select2自动添加临时标签，等AJAX成功后再手动插入带真实ID的选项
        e.preventDefault();

        $.ajax({
            type: 'POST',
            url: base_url + 'projects/addCustomType',
            data: {
                type: selectedItem.text
            },
            dataType: 'json', // 强制指定接收JSON格式响应，避免解析错误
            success: function(response) {
                if (response.status === 'success') {
                    // 创建带数据库返回ID的新选项，并设置为选中状态
                    const newOption = new Option(selectedItem.text, response.typeID, true, true);
                    $(selectElement).append(newOption).trigger('change');
                } else {
                    console.error('保存自定义类型失败:', response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX请求错误:', error);
            }
        });
    }
});

关键说明 #

1. select2:selecting事件：在选中操作完成前触发，能精准拦截自定义标签的创建请求，避免Select2自动生成临时option干扰判断。
2. 阻止默认行为：用e.preventDefault()暂停默认标签添加流程，等AJAX成功拿到数据库返回的真实ID后，再插入合法的option，保证数据一致性。
3. 自定义标签判断：通过检查原生select中是否存在对应value的选项，准确区分原生选项和用户输入的自定义标签。
4. 指定dataType: 'json'：确保AJAX能正确解析后端返回的JSON响应，避免response.status等字段无法读取的问题。

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