Question

我正在尝试绑定2个下拉列表来敲除可观察数组。条件是第一个下拉列表必须先填充。第二个下拉列表取决于第一个下拉列表。我正在订阅到第一个下拉列表，填充第二个下拉列表。为了尝试实现这一点，我编写了以下代码

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, options: certificationArray, optionsText: 'Certification', optionsValue: 'CertificationID', 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, options: specializationArray,optionsText:'Specialization',optionsValue:'SpecializationId', optionsCaption: 'Select a Specialization'">
                </select>
            </div>
        </div>

视图模型是

   self.specializationArray = ko.observableArray([]);
   self.certificationArray = ko.observableArray([getCertifications()]);
   self.certification = ko.observable("");
   self.specialization = ko.observable("");
   self.certification.subscribe(function () {
    self.specializationArray([]);
    getSpecializations();    
    }
});

获得相应认证和规范的功能是

 var getCertifications = function () {
$.getJSON("/Provider/GetCertifications", function (data) { 
    return data;
    });
});
};
    var getSpecializations = function () {
$.getJSON("/Provider/GetSpecializations/", { certificationID: $("#certification").val() }, function (data) {       
    self.specializationArray(data) 
   })
 }

JSON响应如下所示 enter image description here 而JSON看起来像这样有人可以指导我朝着正确的方向前进吗，我是全新的淘汰赛和JSON.I我的机智在这里结束。所以，任何帮助都会非常感激。谢谢你。

Answer 1

在KnockOut中，数组的值与下拉列表中的选项是分开的。您不会更改observableArray，而是可以观察值本身。但更好的方法是使用ko.computed字段来保存第二个下拉列表的值。

我真的不明白为什么你认为你的下拉必须以某种顺序受约束。我不完全确定认证和专业化如何与您的问题相互关联。你并没有真正在self.certification.subscribe()做任何事情，就像填写专业化时有任何依赖。您在Certifications中提供的JSON也没有任何相关的Specialization外键。但是，如果您的JSON for Certification看起来像这样：

[{"CertificationID": 1, "Certification": "M.B.B.S.", "SpecializationID": "7"},{"CertificationID": 2, "Certification": "M.D.", "SpecializationID": "3"}, ...]

虽然专业化的JSON看起来像这样......

[{"SpecializationID": 1, "Specialization": "Cardiology"},
 {"SpecializationID": 2, "Specialization": "Dentistry"}, 
 {"SpecializationID": 3, "Specialization": "General Practioner"}, ...
 {"SpecializationID": 7, "Specialization": "Surgery"}
]

我相信这样的事情应该有效：

self.specialization = ko.computed(function() {        
    return ko.utils.arrayFirst(getCertifications(), function(certs) {
        return certs.ID == self.SpecializationID();
    }).SpecializationID;        
});

但是因为我没有看到你有任何依赖关系，所以，为什么不直接填写它们：

self.certificationArray = ko.observableArray(getCertifications());
self.specializationArray = ko.observableArray(getSpecializations());
self.certification = ko.observable(vm.certification);
self.specialization = ko.observable(vm.specialization);

您可以使用从数据集返回的viewmodel设置这些值，该数据集应该是数据库表中的ID字段（CertificationID，SpecializationID）。

使用knockout observable数组填充下拉列表

1 个答案: