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

Two Drop down options binding based on ID knockoutjs

本文关键字：绑定 ID knockoutjs 选项 两个      更新时间：2023-09-26

我有以下内容:

     <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个下拉列表一个用于动物选择驯服或野生，然后基于此更改我的wildortamamed下拉列表以显示使用指定ID的野生动物或驯服动物。

注意:这是动态的，所以可能有其他类型的动物…

有人能帮我一下吗?

谢谢

尝试使用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;
    });
});

希望有帮助!

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

相关文章：