Legen Sie den Standardwert für ein Dropdown-Feld fest

Question

Ich versuche, einen Standardwert für ein Dropdown-Menü festzulegen, das ich habe. Das Dropdown enthält alle 12 Monate. Es ist dynamisch gefüllt. Allerdings versuche ich es so zu machen, dass der Standard-Dropdown-Wert der aktuelle Monat ist. Ich verwende KnockoutJS

Der folgende Code ist, wie ich Informationen zum Dropdown-HTML-Code sende.

  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-Code:

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

Dieser Code ist, wie die Seite geladen, die das Drop-Down-Funktionen.

 $(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

Der Grund, warum Ihr Code nicht funktioniert, ist, weil Sie den Wert der Auswahl festlegen müssen. Indem Sie die Wertbindung in einem Auswahlsteuerelement festlegen, teilen Sie Ihrem ViewModel mit, welche beobachtbare Option Sie in der Dropdown-Liste auswählen möchten.

Nebenbei, wenn Sie ein Array verwenden, brauchen Sie wahrscheinlich keine Monatszahl, wie es in der Position jedes Monats im MonatData-Array implizit ist. d.h. Jan bei Index 0, Feb um Index 1 usw.

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>

gespeicherten