如何使用 C# 和 jQuery 在 ASP.NET MVC 的下拉列表中应用 Select 2答案

【问题标题】：How to apply Select 2 in dropdownlist in ASP.NET MVC using C# and jQuery如何使用 C# 和 jQuery 在 ASP.NET MVC 的下拉列表中应用 Select 2
【发布时间】：2021-09-03 19:00:52
【问题描述】：

我正在尝试在我的 ASP.NET MVC 视图的下拉列表中应用 select2 jQuery 函数，但我被卡住了，任何人都可以在这方面帮助我提前致谢。

这是我的看法

<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 () {
         $("#WorkerId").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 Cateogry", htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.WorkerId, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

我也在使用 ajax 调用来填充这里的下拉列表...

<script>
    function FillWorker() {
        var skill = $('#SkillId').val();

        $.ajax({
            url: '/Order/FillWorker?skill=' + skill,
            type: "GET",
            dataType: "JSON",
            data: { SkillId: skill },
            success: function (workers) {
                $("#WorkerId").html(""); // clear before appending new list

                $.each(workers, function (i, workers) {
                    $("#WorkerId").append(
                        $('<option></option>').val(workers.Value).html(workers.Text));
                });
            }
        });
    };
</script>

【问题讨论】：

您的浏览器控制台有什么错误吗？
Uncaught TypeError: $(...).select2 is not a function at HTMLDocument.<anonymous> at fire (jquery.js:3048) at Object.fireWith [as resolveWith] (jquery.js:3160) at Function.ready at HTMLDocument.completed
上面有错误
查看stackoverflow.com/questions/20034522/select2-is-not-a-function
在我的情况下如何申请

标签： c# jquery asp.net asp.net-mvc

【解决方案1】：

Please replace your code with following one. because in your case you set select option in document.ready event at this time maybe your dropdown list not populated. so select2 not working. so setTimeout need or write after your dropdown populated     

setTimeout(function () { $("#WorkerId").select2(); }, 1000);

【讨论】：

感谢 hirpara rajesh

【解决方案2】：

我通过 layout.cshtml 中的这种方式解决了这个问题有多个脚本正在运行，所以我只需删除它们我的问题就解决了

【讨论】：