title: Populating a dropdown list using knockout and jquery ajax
body: <p>I am populating a drop down list using ajax like so.</p>
  
  <pre><code>    var getCertifications = function () {
      $.getJSON("/Provider/GetCertifications", function (data) {
          $.each(data, function (i, item) {
              var certification_data = "&lt;option value=" + item.CertificationID + "&gt;" + item.Certification + "&lt;/option&gt;";
              $(certification_data).appendTo("#certification");
            });
        });
     };
  </code></pre>
  
  <p>getCertifications is being called in the document.ready method.
  I wanted to populate a second drop downlist based on the value of the selected option in the first dropdownlist.So I wrote another function</p>
  
  <pre><code> var getSpecializations = function () {
  var value = $("#certification").val();
  $.getJSON("/Provider/GetSpecializations/", { certificationID: value }, function (data) {
      $.each(data, function (i, item) {
          var specialization_data = "&lt;option value=" + item.SpecializationId + "&gt;" + item.Specialization + "&lt;/option&gt;";
          $(specialization_data).appendTo("#specialization");
            });
        });
    }
  </code></pre>
  
  <p>The html is as shown</p>
  
  <pre><code>  &lt;div class="form-group"&gt;
              &lt;label class="col-sm-2 control-label labelfont"&gt;Certification: &lt;/label&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;select class="form-control" id="certification",name="certification",data-bind="value: certification" &gt;
                      &lt;option value="0"&gt;Select a Certification&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label class="col-sm-2 control-label labelfont"&gt;Specialization:&lt;/label&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;select class="form-control" id="specialization" , name="specialization" data-bind="value: specialization" &gt;
                      &lt;option value="0"&gt;Select a Specialization&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>My view model has the observables as shown</p>
  
  <pre><code>self.certification = ko.observable("");
  self.specialization = ko.observable("");
  </code></pre>
  
  <p>I am calling the getSpecializations function in the subscribe method of the first dropdown like so</p>
  
  <pre><code>self.certification.subscribe(function () { 
      getSpecializations();      
  });
  </code></pre>
  
  <p>There are no errors in the console ,but the second drop down i.e; the Specializations dropdown is not getting populated.Could you folks point me in the right direction.</p>