Question

我是JQuery UI的新手，特别是在使用插件时。我正在为从MVC Controller填充的SelectList选择select2作为ViewBag。

对于多行HTML表，我有相同的SelectList数据。所以，我想为包含SelectList的所有行应用选择的select2（在相同的ViewBag数据上运行）。

但我只看到选择的select2应用于放置在HTML表格行第一行的非常第一个SelectList。所有其他行未显示select2选择为已应用。

我能解决这个问题吗？

以下是代码段：

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

和rednered输出

enter image description here

此致乌斯曼

Answer 1

您为下拉列表分配了多个相同的Id属性。 Id属性应该是唯一的，浏览器只会呈现第一个属性。这就是为什么你只得到一个正确的结果。您需要使用Id属性替换class属性，如下所示：

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

为什么不选择select2用于具有ViewBag相同数据的选择列表

1 个答案: