Select2移除JS插入项残留选项问题及批量导入优化需求

问题根源 #

通过JS直接向<select>中追加<option>时，这些选项会被Select2判定为预定义选项，移除选中状态时仅取消选中，不会删除DOM中的<option>；而手动添加的标签是Select2动态生成的临时选项，移除时会自动清理对应的DOM元素。

1. 修复JS导入标签的移除残留问题 #

修改导入按钮的逻辑，让JS添加的标签和手动添加的逻辑保持一致，避免直接设置选项为选中状态，而是通过统一更新选中值的方式触发Select2的动态标签机制：

$('#importCitiesBtn').on('click', function() {
    var importedCities = $('#importCitiesInput').val().split(',');
    var $select = $('.cities-tags');
    var currentValues = $select.val() || [];

    importedCities.forEach(function(cityName) {
        cityName = cityName.trim();
        if (!cityName) return;

        // 跳过已存在的标签
        if (!currentValues.includes(cityName)) {
            // 添加未选中的选项，后续统一设置选中
            $select.append(new Option(cityName, cityName, false, false));
            currentValues.push(cityName);
        }
    });

    // 一次性更新选中状态并触发Select2更新
    $select.val(currentValues).trigger('change');
});

2. 实现粘贴逗号分隔字符串自动解析标签 #

监听Select2搜索框的粘贴事件，解析内容后自动添加标签：

// 监听Select2下拉框打开事件，获取动态生成的搜索框
$('.cities-tags').on('select2:open', function() {
    setTimeout(function() {
        $('.select2-search__field').on('paste', function(e) {
            e.preventDefault(); // 阻止默认粘贴行为
            // 获取粘贴的文本内容
            var pasteContent = e.originalEvent.clipboardData.getData('text');
            // 分割、去空、去重
            var cities = pasteContent.split(',')
                .map(city => city.trim())
                .filter(city => city);

            var $select = $('.cities-tags');
            var currentValues = $select.val() || [];
            var newCities = cities.filter(city => !currentValues.includes(city));

            // 添加新标签
            newCities.forEach(city => {
                $select.append(new Option(city, city, false, false));
                currentValues.push(city);
            });

            // 更新Select2状态
            $select.val(currentValues).trigger('change');
            // 清空搜索框并关闭下拉框
            $('.select2-search__field').val('');
            $('.cities-tags').select2('close');
        });
    }, 100); // 延迟确保搜索框已渲染
});

效果验证 #

修改后：

• 手动添加、JS导入、粘贴的标签，移除时都会完全清除对应的<option>元素
• 直接向Select2搜索框粘贴逗号分隔的城市字符串，会自动解析为独立标签添加

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