드롭 다운의 기본값 설정

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

코드가 작동하지 않는 이유는 select 값을 설정해야하기 때문입니다. 선택 컨트롤에 값 바인딩을 설정하면 ViewModel에서 선택 드롭 다운에서 현재 선택된 옵션을 유지할 것인지를 알려줍니다.

배열을 사용하는 경우 월 데이터가 각 달의 위치에 함축되어 있기 때문에 배열 번호를 사용하지 않아도됩니다. 즉, 얀 등이 인덱스 1

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>

에서 2 월 인덱스 0 저장된