remplir/créer une liste déroulante avec jquery

Question

J'ai besoin d'un menu déroulant à des fins de filtrage dans mon application MVC3. Je voudrais gérer autant que possible avec jquery puisque je n'ai pas besoin de cette liste déroulante pour autre chose que le filtrage. Je sais que le filtrage basé sur la liste est une autre étape, mais je me concentre juste sur la liste déroulante pour l'instant.

Jusqu'à présent, j'ai construit une liste vide avec MVC, puis j'ai essayé de le remplir avec jquery en charge.

Voici mon code.

<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"/>  
<script type="text/javascript"> 
$(function() { 
    var myOptions = 
    { 
     val1: '12 hours', 
     val2: '24 hours' 
    }; 
    $.each(myOptions, function (val, text) { 
     $('#timeSelect').append(new Option(text,val)); 
     }); 
}); 

</script> 

<div id="timeSelect"> 
    @Html.DropDownListFor(
    x => x.FilterTimeList, 
    Enumerable.Empty<SelectListItem>(), 
    "-- select Time --" 
    ) 
</div> 

J'ai une liste déroulante dans mon ViewModel nom FilterTimeList, mais je voudrais en finir avec cela car cette information n'est pas nécessaire par le back-end.

Avec le code ci-dessus, la liste a l'option Sélectionner l'heure, mais aucune option n'est ajoutée à la liste en fonction de la requête. Pour plus de clarté, j'ai une table qui est peuplée basée sur les valeurs de base de données.

Je prévois de filtrer cette table en fonction de l'option choisie dans la liste déroulante.

Answer 1

Vous devriez avoir cette ligne au lieu du courant que vous avez:

$('#timeSelect select').append(new Option(text,val)); 

Une plus approche jquery style, avec les mêmes résultats seraient ceci:

$('<option />').val(val).text(text).appendTo('#timeSelect select');