How to apply Select 2 in dropdownlist in ASP.NET MVC using C# and jQuery-Twitter bootstrap

I am trying to apply the select2 jQuery function in a dropdownlist in my ASP.NET MVC view but I am stuck can anyone help me in this regard Thanks in advance.

Here is my view

<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>

I am also using ajax call for filling this dropdownlist which is here…

<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>