Why not chosen select2 is being applied for selectlist with same data from ViewBag

Question

I am extremely new bie for JQuery UI and especially when using the plugins. I am setting select2 chosen for SelectList populated from MVC Controller as ViewBag.

I have the same SelectList data for multiple rows of HTML table. So, I want to apply chosen select2 for all rows containing SelectList ( operting on same ViewBag data ).

But I only see chosen select2 applied for VERY first SelectList placed at the first row of HTML table row. All other rows are not showing select2-chosen as applied.

Can I have the solution ?

Here 's the Code segment :

<table class="table table-hover">

        <tr>
            <th>@Html.DisplayNameFor(model => model.ProgramName)</th>
        </tr>
        @if( Model!=null )
        { 
            foreach (var item in Model)
            {
                <tr>

                    <td width="64%">@Html.DisplayFor(modelItem => item.ProgramName)</td>
                    <td width="15%">@Html.ListBox("SemesterList", (IEnumerable<SelectListItem>)ViewBag.SemesterList, new { @class = "chosen-select" })</td>                

                    <td class="warning">                    
                        @Html.ActionLink("Plan", "Plan", new { id = item.ProgramId }, new { @class = "btn btn-info btn-block" })

                    </td>
                </tr>
            }
        }
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function ()
    {
        var linkObj;
        var items = [];

        $("#SemesterList").select2
         ({
            placeholder: "Choose Semester..",
            maximumSelectionSize: 10,
            width: 150
        });    
    });
</script>

and the rednered output is

Regards Usman

Answer 1

You assigned multiple of the same Id attribute to the dropdownlist. Id attribute should be unique, the browser will only render the first one. That's why you only got one correct result. You need to replace Id attribute by using class attribute, like below:

 $(".chosen-select").select2
   ({
        placeholder: "Choose Semester..",
        maximumSelectionSize: 10,
        width: 150
   });