对于下拉列表框的绑定在之前的knockoutjs文章中已经介绍过，今天主要说一下级联的select，事实上，在knockoutjs里，是以数据绑定为中心的，而数据是以面向对象为前提的，而对于级联绑定来说，它也是一种面向对象里关系对象的体现，有了关系对象，我们就可以把级联很容易的开发出来，而不用像之前JS那么麻烦了。
准备数据对象
var Grade_Subject_R = function () { var self = this; self.Grades = [ { 'subjects': [{ 'id': '1', 'name': '语文' }, { 'id': '2', 'name': '数学' }, { 'id': '3', 'name': '英语' }], 'arid': '1', 'name': '小学' }, { 'subjects': [{ 'id': '1', 'name': '语文' }, { 'id': '2', 'name': '数学' }, { 'id': '3', 'name': '英语' }, { 'id': '4', 'name': '物理' }, { 'id': '22', 'name': '化学' }, { 'id': '23', 'name': '生物' }], 'arid': '2', 'name': '初中' }, { 'subjects': [{ 'id': '1', 'name': '语文' }, { 'id': '2', 'name': '数学' }, { 'id': '3', 'name': '英语' }, { 'id': '4', 'name': '物理' }, { 'id': '22', 'name': '化学' }, { 'id': '23', 'name': '生物' }, { 'id': '24', 'name': '历史' }], 'arid': '3', 'name': '高中' } ]; self.grade = ko.observable(); self.subject = ko.observable(); /* 当前选中的年级ＩＤ为self.grade().id 当前选中的学科ＩＤ为self.subject().id ＨＴＭＬ代码： <select data-bind=" options: Grades, optionsText: 'name', value:grade, optionsCaption: '选择年级'"> </select> <span data-bind="with:grade"> <select data-bind=" visible: $parent.grade, options: Subjects, optionsText: 'name', value:$parent.subject, optionsCaption: '选择学科'"> </select> </span> <span data-bind="with:grade"> <!-- ko foreach: Subjects --> <input type="checkbox" data-bind="value: id, checked: $root.subject" /> <span data-bind="text: name"></span> <!-- /ko --> </span> */ }
JS代码
var model = new Grade_Subject_R(); ko.applyBindings(model); for (var i in model.Grades) { if (model.Grades[i].arid == "2") { model.grade(model.Grades[i]); break; } }
HTML代码
<select data-bind=" options: Grades, optionsText: 'name', value:grade, optionsCaption: '选择年级'"> </select> <!-- ko with:grade --> <select data-bind=" visible:$parent.grade, options: subjects, optionsText: 'name', value:$parent.subject, optionsCaption: '选择学科'"> </select> <!-- /ko -->
效果截图
本文转自博客园张占岭（仓储大叔）的博客，原文链接：MVVM架构~knockoutjs系列之级联select，如需转载请自行联系原博主。
