首页 文章

Knockout绑定动态生成的Dropdown选项[关闭]

提问于
浏览 次
0

我有2个下拉列表 . 两者都是通过淘汰数据绑定的 . 我想在这里做两件事：第一个下拉列表是认证，第二个下拉列表是专业化 .

  • 默认情况下，第二个下拉列表应该'Please select Specialization'作为未发生的选项 . 它发生在第一次下拉 . 我想我知道为什么 . 也许是因为Certification是一个可观察的数组，它通过 options 绑定进行数据绑定 .

  • 不幸的是，我不能对第二个下拉列表做同样的事情，因为它的值将取决于第一个下拉列表 . 即使我已经为第二次下拉列表给出了 optionsCaption ，但在页面加载时我仍然看不到它 .

$(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>
javascript jquery knockout.js

1 回答

  • 1

    我得到了jquery更改和一些代码，并引入了 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>

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

    当我订阅DDL1的 value 绑定时，下拉列表发生了变化，我们可以有条件地填充dropdown2所需的数据 .

    对于工作小提琴 Click here

    保持视图模型清洁总是更好，这有助于您处理复杂的场景 .

    回复于

相关问题