Установить значение по умолчанию для выпадающего списка

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, который, как вы видите, хотите сохранить выбранный вами вариант в раскрывающемся списке выбора.

Как в стороне, если вы используете массив, вам, вероятно, не нужен номер месяца, поскольку он неявный в позиции каждого месяца в массиве monthData. т.е. Ян хранится по индексу 0, февраль с индексом 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>