动态生成的下拉列表选项的挖空绑定
Knockout binding of a Dynamically generated Dropdown options
我有 2 个下拉列表。两者都通过挖空进行数据绑定。我试图在这里实现两件事:第一个下拉菜单是认证,第二个下拉菜单是专业化。
-
默认情况下,第二个下拉列表应将"请选择专业化"作为未发生的选项。它发生在第一个下拉列表。我想我知道为什么。也许是因为认证是一个可观察的数组,它通过
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>
我分叉了jquery更改和一些代码并引入了subscribe
。
查看型号 :
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());
});
视图:
<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>
当我订阅 DDL1 的绑定时下拉列表中有变化value
我们可以有条件地填充 dropdown2 所需的数据。
对于工作小提琴,请单击此处
保持视图模型干净总是更好,这在处理复杂场景时会有所帮助。
相关文章:
- 重置为下拉菜单中的未绑定选项
- 在dojo中将数据从一个选项卡绑定到另一个选项卡(打开选项卡?)
- Knockout js 条件选项绑定
- 为什么我的淘汰选项绑定不起作用
- 挖空选项对象绑定
- 选择/选项 ng-model 未绑定 ng-selected
- 如何刷新'选项'ko多选组件中的绑定
- Magento网站-按选项排序:上下箭头与排序数据绑定,只需删除上下箭头即可
- 如何在HTML中用两个预定义的值绑定选择选项,以在mongodb中插入数据
- 如何使用淘汰选项绑定从select中删除值
- 如何设置<选项>在用数据绑定填充的选择中='选项:[..]'
- 对没有数据绑定“选项”或“标题”的选择列表进行挖空验证
- 在选择框中从任意 JavaScript 对象绑定选项值和选项文本
- 如何使用 Angular.JS 在下拉列表中绑定选项的值和文本
- 当通过AJAX绑定选项时,是否可以将select元素的默认值传递给Knockout
- Ember.使用未绑定选项列表进行选择
- AngularJS绑定选项的性能
- 双向绑定选项
- 如何在Knockout中的数据绑定选项中自动选择用户状态
- 设置默认数据绑定选项的值