Dawar Dawar - 3 months ago 19
jQuery Question

Why the jQuery Selectable plugin doesn't work with a foreach generated list?

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>


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?

Answer

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.

Try this:

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