Knockout binding of a Dynamically generated Dropdo

问题:

I have 2 Dropdownlists. Both are data-bound through knockout. I am trying to achive 2 things here: The first dropdown is Certification, the second dropdown is Specialization.

1. The second dropdown should by default have 'Please select Specialization' as an option which is not happening. It is happening for the first dropdown. I think I know why. Maybe it's because Certification is an observable array which is being data bound through the options binding.

2. Unfortunately I cannot do the same for the second dropdown, since its values are going to depend on the first dropdown. Even though I have given an optionsCaption for the second dropdown, I still don't see it when the page loads.

$(document).ready(function () {
    var Provider = {
        ProviderID: ko.observable(""),
        FirstName: ko.observable(""),
        LastName: ko.observable(""),
        Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]),
        SelectedCertification: ko.observable(""),
        Specialization: ko.observable(""),
        TaxonomyCode: ko.observable(""),
        SSN: ko.observable(""),
        ContactNumber: ko.observable(""),
        ContactEmail: ko.observable(""),
        NPI: ko.observable("")
    };
    ko.applyBindings(Provider);

    $("#Certification").change(function () {
        if (($("#Certification").val() == "M.D.") || ($("#Certification").val() == "M.B.B.S")) {
            $("#Err_Certification").hide();
            $("#Certification").removeClass('borderclass');

            $("<option>Dermatology</option>").appendTo("#Specialization");
            $("<option>Hematology</option>").appendTo("#Specialization");
            $("<option>Neurology</option>").appendTo("#Specialization");
        } else if (($("#Certification").val() == "R.N.") || ($("#Certification").val() == "M.S.N.")) {
            $("#Err_Certification").hide();
            $("#Certification").removeClass('borderclass');
            //$("#Certification option[value='option1']").remove();
            //$("#Certification option[value='option2']").remove();
            //$("#Certification option[value='option3']").remove();

            $("<option>Pediatric Nursing</option>").appendTo("#Specialization");
            $("<option>Critical Care Nursing</option>").appendTo("#Specialization");
            $("<option>Occupational Health Nursing </option>").appendTo("#Specialization");
        } else {
            $("#Specialization").addClass('borderclass');
            $("#Err_Specialization").show();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="container">
  <form class="form-horizontal">
    <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: SelectedCertification, options: Certification, optionsCaption: 'Select a Certification'">
        </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, optionsCaption: 'Select a Specialization'">
        </select>
      </div>
    </div>
  </form>
</div>

回答1:

I got forked up the jquery change and some code and bringing in subscribe .

View Model :

  var Provider = function () {
          var self = this;
          self.Certification = ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]);
          self.SpecialzationArray = ko.observableArray();
          self.SelectedCertification = ko.observable();
          self.Specialization = ko.observable();
          self.SelectedCertification.subscribe(function (val) {
            self.SpecialzationArray([]);
              if (val == "M.D." || val == "M.B.B.S") {
                  self.SpecialzationArray(["Dermatology", "Hematology", "Neurology"])
              } else if (val == "R.N." || val == "M.S.N.") {
                  self.SpecialzationArray(["Pediatric Nursing", "Critical Care Nursing", "Occupational Health Nursing"])
              } else {
                  self.SpecialzationArray([]);
              }
          });

      };

      $(document).ready(function () {
          ko.applyBindings(new Provider());
      });

View :

<select data-bind="value: SelectedCertification, options: Certification, optionsCaption: 'Select a Certification'"></select>
<br/>
<select data-bind="value: Specialization,options:SpecialzationArray, optionsCaption: 'Select a Specialization'"></select>

When ever there is a change in dropdownlist as i'm subscribing to value binding of DDL1 we can conditionally fill the data required for dropdown2 .

For Working fiddle Click here

It's always better to maintain view model clean which helps when you dealing in complex scenarios .