Question

I am trying to achieve something like this,

<select id="time" size="1" name="Time" disabled="disabled">
    <% foreach (string item in (List<string>)Model.OpenCloseTime[dynamicVariable].AppointmentTimes)
        {%>
            <option id="<%:item%>" value="<%:item%>">
            <%:item%></option>
        <%} 
    %>
</select>

Where dynamicVariable= $('#date').datepicker("getDate");

To break down the issue, getDate is supposed to fetch the value of the weekday from a calendar which needs to help me dynamically populate a select dropdown, based on the data we are getting from the model object day value.

How could I achieve this?

Thanks for the help.

Answer 1

I’m not sure what dynamicVariable looks like, but here’s how you can populate #time with a Javascript array:

var times = ["Morning", "Afternoon", "Evening"];
for(i in times) {
    $("#time").append(
        $("<option></option>").attr("value", times[i]).text(times[i])
    );
}

Edit to answer your comment:

Concatenate your list:

List<string> items = (List<string>)Model.OpenCloseTime[dynamicVariable].AppointmentTimes;
string itemsStr = string.Join(",", items.toArray());

Print it in your javascript:

var items = "<%:itemStr%>";

Explode the string into a Javascript array:

var items_arr = items.split(",");

Use what I posted above to make the select box:

for(i in items_arr) {
    $("#time").append(
        $("<option></option>").attr("value", items_arr[i]).text(items_arr[i])
    );
}