在ASP.NET MVC中使用C#与jQuery为下拉列表集成Select2组件的方法及问题求助

嘿，看你在把Select2和Ajax填充下拉列表结合时遇到了麻烦，这就帮你梳理下核心问题点和修复步骤：

核心问题与修复方案 #

1. Ajax填完选项必须刷新Select2 #

当你通过Ajax往原生<select>里塞新选项时，Select2根本不知道DOM变了——这是最常见的坑！所以必须在Ajax的success回调里，要么重新初始化Select2，要么触发它的更新事件。

修改你的FillWorker函数：

function FillWorker() {
    var skill = $('#SkillId').val();
    $.ajax({
        url: '/Order/FillWorker', // 这里把url里的skill参数去掉，data里已经传了，避免重复
        type: "GET",
        dataType: "JSON",
        data: { SkillId: skill },
        success: function (workers) {
            $("#WorkerId").empty(); // 清空原有选项，用empty()比html("")更优雅
            $.each(workers, function (i, worker) {
                $("#WorkerId").append(
                    $('<option>', {
                        value: worker.Value,
                        text: worker.Text
                    })); // 换种更简洁的选项创建方式
            });
            // 关键操作：刷新Select2实例
            $("#WorkerId").select2("destroy").select2({ multiple: true });
            // 或者更轻量的：$("#WorkerId").trigger("change");
        }
    });
};

2. 给下拉列表加上多选属性 #

你给Select2设置了multiple: true，但原生的DropDownList默认是单选的！必须在HTML属性里加上multiple="multiple"，不然Select2的多选功能根本生效不了。

修改视图里的DropDownList代码：

@Html.DropDownList("WorkerId", new SelectList(Enumerable.Empty<SelectListItem>()), "Select Workers", 
    htmlAttributes: new { @class = "form-control", multiple = "multiple" })

（顺便提一句，你原来的提示文本写的是"Select Cateogry"，应该是笔误，改成"Select Workers"更贴合场景～）

3. 确认jQuery版本没问题 #

你用的jQuery是1.10.2，Select2 4.0.3确实兼容这个版本，但要注意页面里别加载多个jQuery版本——这很容易导致各种奇怪的冲突，打开浏览器控制台看看有没有报错就能快速排查。

4. 初始化时机要对 #

你把Select2初始化放在$(document).ready()里是对的，但要确保FillWorker要么在初始化之后调用，要么调用后重新刷新Select2（这一点我们已经在第一步处理了）。

整合后的完整代码 #

把上面的修改整合起来，你的视图代码应该是这样的：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<script>
    $(document).ready(function () {
        // 初始化Select2多选下拉
        $("#WorkerId").select2({ multiple: true });
    });

    function FillWorker() {
        var skill = $('#SkillId').val();
        $.ajax({
            url: '/Order/FillWorker',
            type: "GET",
            dataType: "JSON",
            data: { SkillId: skill },
            success: function (workers) {
                $("#WorkerId").empty();
                $.each(workers, function (i, worker) {
                    $("#WorkerId").append(
                        $('<option>', {
                            value: worker.Value,
                            text: worker.Text
                        }));
                });
                // 刷新Select2，让新选项生效
                $("#WorkerId").select2("destroy").select2({ multiple: true });
            }
        });
    };
</script>

<div class="form-group workerDiv Show" style="font-weight:bolder; color:white">
    <label>Select Workers</label><br />
    <div class="col-md-10">
        <div class="u-form-group">
            @Html.DropDownList("WorkerId", new SelectList(Enumerable.Empty<SelectListItem>()), "Select Workers", 
                htmlAttributes: new { @class = "form-control", multiple = "multiple" })
            @Html.ValidationMessageFor(m => m.WorkerId, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

这样改完之后，Select2应该就能正常工作了——既能初始化出多选样式，Ajax填充选项后也能正确识别并显示。如果还是有问题，先看浏览器控制台的报错信息，那往往是定位问题最快的方式～

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