为什么 jQuery Selectable 插件不适用于 foreach 生成的列表？答案

【问题标题】：Why the jQuery Selectable plugin doesn't work with a foreach generated list?为什么 jQuery Selectable 插件不适用于 foreach 生成的列表？
【发布时间】：2016-08-19 16:18:09
【问题描述】：

我目前正在开发一个 MVC 项目并实现了 jQuery Selectable 插件。我的模型中有一个字符串，我认为Split() 如下所示：

@{
    var size = Model.AvailableSizes.Split(',');
    foreach (var item in size)
    {
        <ol class="ui-selectable" id="selectable">
            <li class="ui-selectable">@item</li>
        </ol>
    }
}

这是我认为定义的静态脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $("#selectable").selectable();
    });
</script>

selectable jQuery 插件成功地为每个项目生成了<ol>s，但我只能选择第一个项目而不能选择其余项目。有什么问题？

【问题讨论】：

多么好的答案，非常感谢。

标签： javascript jquery asp.net-mvc razor jquery-ui-selectable

【解决方案1】：

您应该将<ol> 放在循环之外。现在，您正在创建 N 个 ol 元素，其中包含一个 li，所有这些元素都具有相同的 id，这既是无效的 HTML，也是导致问题的原因。

试试这个：

<ol class="ui-selectable" id="selectable">
    @{
        var size = Model.AvailableSizes.Split(',');
        foreach (var item in size)
        {
            <li class="ui-selectable">@item</li>
        }
    } 
</ol>

【讨论】：