两个基于 ID knockoutjs 的下拉选项绑定答案

【问题标题】：Two Drop down options binding based on ID knockoutjs两个基于 ID knockoutjs 的下拉选项绑定
【发布时间】：2014-04-26 07:06:12
【问题描述】：

我有以下几点：

     <select data-bind="options: animals, value: optionsValue: 'ID', optionsText: 'Name'" />

        self.animals = ko.mapping.fromJS([
            {"Name": "Tamed": , "ID": "1" },
            {"Name": "Wild": , "ID": "2" },
            ]);

        self.wildOrTamed = ko.mapping.fromJS([
            { "Name": "Cat", "ID": "1" },
            { "Name": "Lion", "ID": "2" },
            { "Name": "Cat": "1"  },
            { "Name": "Tiger", "ID": "2"  }]);

我希望这个有 2 个下拉菜单供动物选择 Tamed 或 Wild，然后根据该更改我的 wildOrTamed 下拉菜单使用指定的 ID 显示野生动物或 Tamed 动物。

注意：这是动态的，所以可能还有其他类型的动物...

谁能帮帮我。

谢谢

【问题讨论】：

为什么 wildOrTamed 重复“猫”？
哦，我的意思是说名称作为我的选项文本是名称。感谢您指出。

标签： javascript knockout.js knockout-2.0 knockout-mapping-plugin knockout-mvc

【解决方案1】：

尝试使用computed observable。看看小提琴http://jsfiddle.net/aravindbaskaran/6w4N8/

<select data-bind="options: animalTypes, value: animalType, optionsValue: 'ID', optionsText: 'Name'"></select>
<select data-bind="options: animalsForType, value: selectedAnimal, optionsValue: 'ID', optionsText: 'Name'"></select>

self.animalTypes = ko.observable([{"Name": "Tamed","ID": "1"},
    {"Name": "Wild","ID": "2"},
    {"Name": "Something else","ID": "3"}]);

self.animals = [{"Name": "Cat","ID": "1"},
    {"Name": "Lion","ID": "2"},
    {"Name": "Cat","ID": "1"}, 
    {"Name": "Tiger","ID": "2"}];
self.animalType = ko.observable();
self.selectedAnimal = ko.observable();
self.animalsForType = ko.computed(function () {
    var selectedType = self.animalType();
    return !selectedType ? [] : self.animals.filter(function (animal) {
        return animal.ID == selectedType;
    });
});

希望对你有帮助！

【讨论】：

这确实有帮助，我正在寻找这个解决方案。我在正确的道路上，但不知道过滤器功能。

【解决方案2】：

您好，我不是 100% 确定，但以下链接将帮助您创建级联下拉菜单。 http://www.dotnetexpertguide.com/2012/06/cascading-dropdown-knockoutjs-aspnet.html

【讨论】：

我想我正在寻找一个选项来简单地使用 Knockout 而不是回到我的控制器。