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

Question

我目前正在开发一个 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>，但我只能 select 第一个项目而不是其余的。有什么问题？

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