javascript - 为什么jQuery Selectable插件不能与foreach生成的列表一起使用？

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

最佳答案

您应该将<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>