编辑记录时如何在Select2中添加新选项并入库存储？

问题分析 #

你当前的代码仅在页面初始化时尝试添加预设的data选项，但未处理用户在Select2输入框手动输入新内容的场景，所以输入新内容时会显示“无结果找到”。要实现需求，需要让Select2支持创建新标签，同时处理表单提交时的后端保存逻辑。

完整实现代码 #

<select class="selectAdd-who" name="who">
    <option value="item1">item1</option>
    <option value="item2" selected>item2</option>
    <option value="item3">item3</option>
</select>

<script>
$(document).ready(function() {
    $('.selectAdd-who').select2({
        // 允许创建新标签
        tags: true,
        // 自定义新标签生成规则
        createTag: function(params) {
            var term = $.trim(params.term);
            // 输入为空时不生成新标签
            if (term === '') {
                return null;
            }
            // 返回新标签配置，newTag标记用于后续判断是否为新建项
            return {
                id: term,
                text: term,
                newTag: true
            };
        },
        // 自定义搜索匹配逻辑，确保输入内容能被识别为可选选项
        matcher: function(params, data) {
            var inputTerm = $.trim(params.term).toLowerCase();
            // 输入为空时返回所有已有选项
            if (inputTerm === '') {
                return data;
            }
            // 匹配已有选项
            if (data.text.toLowerCase().indexOf(inputTerm) > -1) {
                return data;
            }
            // 返回新创建的候选选项
            return {
                id: params.term,
                text: params.term + ' (新建)',
                newTag: true
            };
        }
    });

    // 保留你原有的页面初始化预设选项逻辑（示例data）
    var data = { id: 'item4', text: 'item4' };
    if ($('.selectAdd-who').find("option[value='" + data.id + "']").length) {
        $('.selectAdd-who').val(data.id).trigger('change');
    } else { 
        var newOption = new Option(data.text, data.id, true, true);
        $('.selectAdd-who').append(newOption).trigger('change');
    } 

    // 表单提交时处理新选项保存
    $('form').on('submit', function(e) {
        var select = $('.selectAdd-who');
        var selectedOpt = select.find('option:selected');
        // 判断是否为新建的标签
        if (selectedOpt.data('newTag')) {
            // 通过AJAX提交新选项到后端保存
            $.ajax({
                url: '/your-save-api', // 替换为你的后端接口地址
                method: 'POST',
                data: {
                    optionValue: selectedOpt.val(),
                    optionText: selectedOpt.text()
                },
                async: false, // 同步提交确保保存完成后再提交表单
                success: function(res) {
                    // 若后端返回新生成的唯一ID，更新选项value避免冲突
                    selectedOpt.val(res.newId);
                }
            });
        }
    });
});
</script>

关键逻辑说明 #

• 开启标签创建：tags: true允许用户输入新内容生成选项，createTag函数控制新选项的生成规则，避免空内容创建。
• 自定义匹配规则：matcher函数确保用户输入的内容能被识别为可选项，不会出现“无结果找到”的提示。
• 新选项保存：表单提交时，判断选中项是否为新建标签，通过AJAX将新选项的文本和值提交到后端，插入到table1对应字段中，后续下拉框加载时就能读取到该选项。
• 保留原有逻辑：保留你原本的页面初始化预设选项代码，不影响原有功能。

后端处理提示 #

后端接口需要接收新选项的optionValue和optionText，将其插入到table1对应字段（注意做去重判断，避免重复插入）。保存成功后可返回一个唯一ID，替换前端选项的value，避免用文本作为value可能出现的冲突。

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