Warum funktioniert das jQuery Selectable Plugin nicht mit einer foreach generierten Liste?

Question

Ich arbeite derzeit an einem MVC-Projekt und implementiert jQuery Selectable Plugin. Ich habe eine Zeichenfolge in meinem Modell, das ich Split() wie unten in meiner Sicht habe:

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

Hier wird das statische Skript aus meiner Sicht definiert:

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

Die selectable jQuery-Plugin erfolgreich generiert die <ol> s für jeden Artikel kann ich aber nur den ersten Artikel auswählen, nicht den Rest. Was ist das Problem?

Answer 1

Sie sollten die <ol>außerhalb die Schleife setzen. Im Moment erstellen Sie eine N ol Elemente mit einer einzigen li in ihnen, alle mit der gleichen id, die beide ungültige HTML ist, und die Ursache für Ihr Problem.

Versuchen Sie folgendes:

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