javascript - ドロップダウン値の事前選択

Question

私のウェブページには何時間もドロップダウンがあります。バックエンドは値を int として返しています。例: "TimeHours":12。

次のコードは、値を 12 にプリセットしません。ただし、BE 値を 12 から「12」に変更すると機能します。

これを機能させるにはどうすればよいですか？変更<option value="1">1 </option> to <option value=1>1 </option>してみましたが、それもうまくいきませんでした。

<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

$(function(){
  var select = $("#TimeHours");
  select.val(select.attr("data-value"));
});

値を型に変換するのと.attr()は対照的に、を使用すると文字列が返されます。.data()

Answer 2

jquery.val関数を使用..

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

仮定data-value='{"TimeHours": "12"}'

デモ: http://jsfiddle.net/ts594/

Answer 3

選択したいものを次のように選択済みとしてマークします。

   <option value="2">2 </option>
   <option value="3">3 </option>
   <option value="4">4 </option>
   <option value="5">5 </option>                    
  ...
   <option selected value="12">12 </option>

Answer 4

selected正しいタグに追加する以外<option>に、オプションを事前に選択する方法はありません。

それが私がこのコードを持っている理由です：

(function() {
    // enable default attribute on <select>
    var sels = document.querySelectorAll("select[data-value]"), l = sels.length, i,
        opts, m, j;
    for( i=l-1; i>=0; i--) {
        opts = sels[i].getElementsByTagName('option'); m = opts.length;
        for( j=0; j<m; j++) {
            if( opts[j].value == sels[i].getAttribute("data-value")) {
                sels[i].selectedIndex = j;
                break;
            }
        }
        sels[i].removeAttribute("data-value");
    }
})();

Answer 5

やってみました？

data-value="{{praseInt(this.TimeHours)}}