为什么jQuery Selectable插件不能与foreach生成的列表一起使用? [英] Why the jQuery Selectable plugin doesn't work with a foreach generated list?

问题描述

我目前正在从事MVC项目并实现了jQuery Selectable插件.我的模型中有一个字符串，在我的视图中为Split()，如下所示:

I am currently working on an MVC project and implemented jQuery Selectable plugin. I have a string in my model which I have Split() as below in my view:

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

这是在我的视图中定义的静态脚本:

Here is the static script defined in my view:

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

selectable jQuery插件成功为每个项目生成了<ol>，但是我只能选择第一个项目，而不能选择其余的项目.有什么问题吗?

The selectable jQuery plugin successfully generates the <ol>s for each item but I can only select the first item not the rest. What is the problem?

推荐答案

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

You should put the <ol> outside the loop. Right now you're creating a N ol elements with a single li inside them, all with the same id which is both invalid HTML, and the cause of your problem.

尝试一下:

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

这篇关于为什么jQuery Selectable插件不能与foreach生成的列表一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！