Question

In my application UI, I have a the following fields: datepicker to display the date, hours dropdown, minutes dropdown, and am/pm dropdown.

The ViewModel is returning a datetime value, based upon which I set the dropdowns :

 function setSelectedIndex(s, valsearch) {
        // Loop through all the items in drop down list
        for (i = 0; i < s.options.length; i++) {
            if (s.options[i].value == valsearch) {
                // Item is found. Set its property and exit
                s.options[i].selected = true;
                break;
            }
        }
        return;
    }

        setSelectedIndex($("#ScheduledHour"), '<%= Model.Scheduled.Value.Hour %>');
        setSelectedIndex($("#ScheduledMinute"), '<%= Model.Scheduled.Value.Minute %>');

and here is the markup:

<select id="ScheduledHour" name="ScheduledHour" >
                        <option value="1">1 </option>
                        <option value="2">2 </option>
                        <option value="3">3 </option>
                        <option value="4">4 </option>
                        <option value="5">5 </option>
                        <option value="6" >6 </option>
                        <option value="7">7 </option>
                        <option value="8">8 </option>
                        <option value="9">9 </option>
                        <option value="10">10 </option>
                        <option value="11">11 </option>
                        <option value="12">12 </option>                       
                    </select></li>

Model.Scheduled.Value.Hour and Model.Scheduled.Value.Minute is returning the correct values but they are not being set on the UI. Any suggestions on what I might be missing?

Answer 1

Try this:

$("#ScheduledHour").val("<%= Model.Scheduled.Value.Hour %>");
$("#ScheduledMinute ").val("<%= Model.Scheduled.Value.Minute %>");

jQuery:

.val( value )

Description: Set the value of each element in the set of matched elements.

value: A string of text or an array of strings corresponding to the value of each matched element to set as selected/checked.

.val()

Description: Get the current value of the first element in the set of matched elements.