Заполнение раскрывающегося списка с использованием нокаута и jquery ajax

Question

Я заполняю выпадающий список, используя ajax.

var getCertifications = function() { 
    $.getJSON("/Provider/GetCertifications", function (data) { 
     $.each(data, function (i, item) { 
      var certification_data = "<option value=" + item.CertificationID + ">" + item.Certification + "</option>"; 
      $(certification_data).appendTo("#certification"); 
      }); 
     }); 
    }; 

getCertifications вызывается в документе document.ready method. Я хотел, чтобы заполнить вторую каплю downlist на основе значения выбранной опции в первом dropdownlist.So я написал еще одну функцию

var getSpecializations = function() { 
var value = $("#certification").val(); 
$.getJSON("/Provider/GetSpecializations/", { certificationID: value }, function (data) { 
    $.each(data, function (i, item) { 
     var specialization_data = "<option value=" + item.SpecializationId + ">" + item.Specialization + "</option>"; 
     $(specialization_data).appendTo("#specialization"); 
      }); 
     }); 
    } 

HTML, является, как показано

<div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">Certification: </label> 
      <div class="col-sm-6"> 
       <select class="form-control" id="certification",name="certification",data-bind="value: certification" > 
        <option value="0">Select a Certification</option> 
       </select> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">Specialization:</label> 
      <div class="col-sm-6"> 
       <select class="form-control" id="specialization" , name="specialization" data-bind="value: specialization" > 
        <option value="0">Select a Specialization</option> 
       </select> 
      </div> 
     </div> 

мой взгляд модель наблюдаемые, как показано

self.certification = ko.observable(""); 
self.specialization = ko.observable(""); 

Я вызываю функцию getSpecializations в подписываться метод первого выпадающего списка, как так

self.certification.subscribe(function() { 
    getSpecializations();  
}); 

В консоли нет ошибок, но второй снижается i.e; выпадающий список специализаций не будет заполнен. Не могли бы вы указать мне в правильном направлении.

Answer 1

Ну что вам нужно сделать, как этот

Вид:

<select data-bind="options:specializationArray,optionsText:'Specialization',optionsValue:'SpecializationId',value:specialization" /> 

ViewModel:

var getSpecializations = function() { 
var value = self. 
$.getJSON("/Provider/GetSpecializations/", { certificationID: value }, function (data) { 
    self.specializationArray(data) //array with Specialization and SpecializationId 
    } 

Работа скрипку here