使用jquery填充/構建下拉列表

Question

我需要在我的MVC3應用程序中進行篩選。我想盡可能多的使用jquery，因爲我不需要這個下拉菜單來進行篩選。我知道基於列表的過濾是另一個步驟，但我現在只關注下拉菜單。

到目前爲止，我用MVC構建了一個空列表，然後試圖用jquery在加載時填充它。

這是我的代碼。

<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> 

我有一個下拉在我的ViewModel命名FilterTimeList名單，但我想，因爲不是由後端需要此信息與此做掉。

有了上面的代碼，列表中有選擇時間選項，但沒有選項添加到基於jQuery的列表中。

只是澄清，我有一個基於數據庫值填充的表。我打算根據從下拉列表中選擇的選項來過濾該表格。

Answer 1

你應該有這條​​線，而不是當前您有：

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

更jQuery的風格方法，用相同的結果會是這樣：

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