ドロップダウンのデフォルト値を設定する

Question

私が持っているドロップダウンのデフォルト値を設定しようとしています。ドロップダウンにはすべて12か月間の機能があります。これは動的に埋められます。しかし、デフォルトのドロップダウン値が現在の月になるようにしています。私はKnockoutJSを使用しています

次のコードは、私がドロップダウンのhtmlコードに情報を送信する方法です。

  self.setMonthData = (data: any) => { 
      var len = data.List.length, 
       i; 

      var monthData = []; 

      for (i = 0; i < len; i++) { 
       self.monthData.push(
        { 
         name: data.List[i].month, 
         month: data.List[i].monthNumber 
        } 
       ) 
      } 
     } 

HTMLコード：

   <select id="monthSelect" class="select select2" style="margin: 10px;" 
        data-bind="options: monthData, 
           optionsText: 'name', 
           optionsValue: 'month'"> 
       <option></option> 
      </select> 

このコードは、ドロップダウンを特徴とする方法、ページのロードです。

 $(function() { 
     ko.applyBindings(viewModel); 
     getGridData(initialMonth, initialYear); 
     viewModel.load(); 

     $("#monthSelect").on('change', function() { 
      var month = $('#monthSelect').find("option:selected").val(); 
      var year = $('#yearSelect').find("option:selected").val(); 
      viewModel.loadChangesData(month, year); 
      getGridData(month, year); 
     }); 

     $("#yearSelect").on('change', function() { 
      var month = $('#monthSelect').find("option:selected").val(); 
      var year = $('#yearSelect').find("option:selected").val(); 
      viewModel.loadChangesData(month, year); 
      getGridData(month, year); 
     }); 
    }); 

Answer 1

あなたのコードが動作しない理由は、選択の値を設定する必要があるためです。選択コントロールに値バインディングを設定することにより、ViewModelに選択ドロップダウンで現在選択されているオプションを保持することを通知します。

配列を使用している場合は、monthData配列の各月の位置に暗黙的に含まれているため、配列を使用していない可能性があります。すなわち月は

var vm = function() { 
 
    var self = this; 
 
    self.months = [ 
 
    'Jan', 
 
    'Feb', 
 
    'Mar', 
 
    'Apr', 
 
    'May', 
 
    'Jun', 
 
    'Jul', 
 
    'Aug', 
 
    'Sep', 
 
    'Oct', 
 
    'Nov', 
 
    'Dec' 
 
    ]; 
 
    self.selectedMonth = ko.observable(self.months[new Date().getMonth()]); 
 
} 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
Defaulted to current month: 
 
<select data-bind="options: months, value: selectedMonth"></select> 
 
<br/> 
 
<br/> 
 
Selected Month: <b data-bind="text: selectedMonth"></b>

等、インデックス0、インデックス1で2月に格納されています