ASP.NET MVC Razor中如何基于复选框切换Select2下拉选项？

当然有办法实现！基于你现有的代码结构，我们可以通过监听复选框状态变化，结合提前准备好的备选ViewBag选项来动态更新Select2的下拉列表。下面是具体步骤和代码示例：

1. 提前准备备选选项集合 #

首先在控制器里，除了原有的ViewBag.Tags，还要准备好备选的选项集合（比如命名为ViewBag.AlternativeTags）：

// 原有的Tags集合
ViewBag.Tags = new List<SelectListItem>
{
    new SelectListItem { Value = "tag1", Text = "常规标签1" },
    new SelectListItem { Value = "tag2", Text = "常规标签2" }
};

// 备选的标签集合，用于切换
ViewBag.AlternativeTags = new List<SelectListItem>
{
    new SelectListItem { Value = "alt1", Text = "备选标签1" },
    new SelectListItem { Value = "alt2", Text = "备选标签2" }
};

2. 前端页面调整 #

在页面上添加用于切换的复选框，同时把备选选项序列化成JSON存到页面的隐藏元素中（方便JS直接获取，不用重复请求后端）：

<!-- 你的原Select2下拉框 -->
@Html.DropDownList("mail-to", (IEnumerable<SelectListItem>)ViewBag.Tags, String.Empty, htmlAttributes: new { multiple = "", @class = "form-control select2 select2-multiple" })

<!-- 用于切换选项的复选框 -->
<div class="mt-2">
    <input type="checkbox" id="toggle-tag-set" />
    <label for="toggle-tag-set">切换到备选标签组</label>
</div>

<!-- 把备选选项序列化为JSON，存在页面供JS读取 -->
<script type="application/json" id="alternative-tag-data">
    @Html.Raw(Json.Serialize(ViewBag.AlternativeTags))
</script>

3. 编写JS逻辑实现切换 #

核心思路是：监听复选框的change事件，根据选中状态切换下拉框的选项，最后刷新Select2组件让新选项生效：

// 初始化你的Select2组件
$("#mail-to").select2({ 
    minimumResultsForSearch: -1, 
    closeOnSelect: false 
});

// 保存原选项的副本，方便切换回去
const originalTagOptions = $("#mail-to").children().clone();
// 从页面隐藏元素中读取备选选项
const alternativeTagOptions = JSON.parse(document.getElementById('alternative-tag-data').textContent);

// 监听复选框状态变化
$("#toggle-tag-set").on('change', function() {
    const $select = $("#mail-to");
    // 清空当前下拉框的所有选项
    $select.empty();

    if ($(this).is(':checked')) {
        // 复选框选中时，添加备选选项
        alternativeTagOptions.forEach(opt => {
            $select.append(`<option value="${opt.Value}">${opt.Text}</option>`);
        });
    } else {
        // 复选框未选中时，恢复原选项
        $select.append(originalTagOptions);
    }

    // 必须触发这个事件，让Select2刷新识别新选项
    $select.trigger('change.select2');
});

可选优化：保留已选中的选项 #

如果你希望切换选项组时，保留之前选中的存在于新选项组中的值，可以在切换前先记录选中的value，切换后重新设置选中状态：

$("#toggle-tag-set").on('change', function() {
    const $select = $("#mail-to");
    // 记录当前选中的value
    const selectedValues = $select.val() || [];
    
    $select.empty();

    let targetOptions;
    if ($(this).is(':checked')) {
        targetOptions = alternativeTagOptions;
    } else {
        targetOptions = originalTagOptions.map(opt => ({
            Value: opt.value,
            Text: opt.text
        }));
    }

    // 添加选项
    targetOptions.forEach(opt => {
        const isSelected = selectedValues.includes(opt.Value);
        $select.append(`<option value="${opt.Value}" ${isSelected ? 'selected' : ''}>${opt.Text}</option>`);
    });

    // 刷新Select2并设置选中状态
    $select.val(selectedValues.filter(val => targetOptions.some(opt => opt.Value === val)));
    $select.trigger('change.select2');
});

这样就能完美实现通过复选框切换Select2下拉选项的需求啦！

内容的提问来源于stack exchange，提问作者Rubén M