populate/build a dropdown with jquery

I need a drop down for filtering purpose in my MVC3 app. I would like to handle as much as possible with jquery since I do not need this drop down for anything but filtering. I know filtering based on list is another step, but I am just focusing on the drop down for now.

So far I built an empty list with MVC and then tried to populate it with jquery on load.

Here is my 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>

I have a drop down list in my ViewModel named FilterTimeList, but I would like to do away with this since t开发者_高级运维his info is not needed by the backend.

With the above code the list has the select Time option, but no options are added to the list based on the jquery.

Just for clarification, I have a table that is populated based off database values. I plan on filtering that table depending on what option is chosen from drop down.

You should have this line instead the current you have:

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

A more jquery style approach, with same results would be this:

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