使用 knockout.js 级联下拉菜单 [关闭]

Question

我正在尝试构建一个三步下拉系列。我能想到的最简单的例子是构建年份/品牌/型号下拉集。

我尝试按照 at 的示例并使用另一个 fiddle at（另一个 fiddle url 以 jsfiddle.net/rniemeyer/V2gvT/ 结尾），但是数据绑定有问题。

我的小提琴有一个要使用的年份/品牌/模型对象的静态列表，并且年份列表可以正确绑定，但永远不会将品牌/模型列表用于数据绑定。

My Fiddle

简单标记

<label for="ddlYear">Year</label>
<select id="ddlYear" data-bind="options: years, value: selectedYear"></select>

<label for="ddlMake">Make</label>
<select id="ddlMake" data-bind="options: makes, value: selectedMake'"></select>

<label for="ddlModel">Model</label>
<select id="ddlModel" data-bind="options: models"></select>

脚本

var viewModel = {
    selectedYear: ko.observable(""),
    selectedMake: ko.observable(""),
    selectedModel: ko.observable("")    
};

viewModel.years = ko.dependentObservable(function() {
    return Enumerable.From(makeModelList).Select(function(it) {
      return it.year;
    }).OrderBy(function(it) {
      return it.year;  
    }).Distinct().ToArray();
}, viewModel);

viewModel.makes = ko.dependentObservable(function() {
    var selectedYear = this.selectedYear();
    return Enumerable.From(makeModelList).Where(function(it) {
        return it.year == selectedYear;
    }).Select(function(it) {
      return it.make;  
    }).ToArray();
}, viewModel);

viewModel.models = ko.dependentObservable(function() {
    var selectedYear = this.selectedYear();
    var selectedMake = this.selectedMake();
    return Enumerable.From(makeModelList).Where(function(it) {
        return it.year == selectedYear;
    }).Where(function(it) {
      return it.make == selectedMake;  
    }).Select(function(it) {
      return it.model;  
    }).ToArray();
}, viewModel);

ko.applyBindings(viewModel);

数据在脚本块窗口中定义

var makeModelList = [
{
    year: 1984,
    make: 'Chevrolet',
    model: 'Camaro'},

等等

我试图让它尽可能简单，但不能完全弄清楚为什么选择是数据绑定，就像我试图模仿的例子一样。

Answer 1

您在这一行中有不必要的 ' （在单词 selectedMake 之后）：

<select id="ddlMake" data-bind="options: makes, value: selectedMake'"></select>

删除它。

固定小提琴 - http://jsfiddle.net/Yrkbd/8/