Question

I have a dropdown for hours on my webpage. The backend is returning the value as an int.
eg: “TimeHours”:12.

The following code doesn’t preset the value to 12. However, if I change the BE value from 12 to “12” it works.

How should I get this to work? I tried changing <option value="1">1 </option> to <option value=1>1 </option> and that didn’t work too.

<li class="align" >                
 <select id="TimeHours" name="TimeHours" 
       style="width:60px" data-value="{{this.TimeHours}}">                    
       <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>

Answer 1

Use jquery .val function..

$('#TimeHours').val(function () {
    return $(this).data('value')['TimeHours'];
});

Assuming data-value='{"TimeHours": "12"}'

DEMO: http://jsfiddle.net/ts594/