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

Posted 2023-03-31

【中文标题】如何使用 C# 和 jQuery 在 ASP.NET MVC 的下拉列表中应用 Select 2

【英文标题】：How to apply Select 2 in dropdownlist in ASP.NET MVC using C# and jQuery

【发布时间】：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

上面有错误

查看***.com/questions/20034522/select2-is-not-a-function

在我的情况下如何申请

【参考方案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 中的这种方式解决了这个问题 有多个脚本正在运行，所以我只需删除它们我的问题就解决了