Knockout.js 敲除级联下拉列表

我有两个下拉列表，一个依赖于另一个（级联）。 “主要类别”的选择决定了“子类别”的项目。 此外，“MainCategories”上的选择也决定了表行的可见性。 以下是我尝试的：

<table>
    <tbody data-bind="foreach: contacts">
        <tr>
            <td>MainCategories:
                <select data-bind='options: MyCategories, value: mycategory, optionsText: "Type", optionsValue: "Type",optionsCaption: "Select..."'></select>
            </td>
            <td>
                <!-- ko with: mycategory -->SubCategories:
                <select data-bind='options: Categories, optionsText: "Category", optionsCaption: "Select...", value: $parent.product'></select>
                <!-- /ko -->
            </td>
        </tr>
        <tr data-bind="visible:mycategory()=='Type1'">
            <td>I am visible</td>
        </tr>
    </tbody>
</table>

<script type = "text/javascript" >
    var MyCategories = [{
        "Categories": [{
            "Category": "Category1"
        }, {
            "Category": "Category2"
        }],
        "Type": "Type1"
    }, {
        "Categories": [{
            "Category": "Category3"
        }, {
            "Category": "Category4"
        }],
        "Type": "Type2"
    }];
    var initialData = [{
        category: "Mobile",
        product: "Nokia"
    }];

    var ContactsModel = function (contacts) {
        var self = this;
        self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
            return {
                mycategory: ko.observable(contact.category),
                product: ko.observable(contact.product)
            };
        }));

    };

    ko.applyBindings(new ContactsModel(initialData));
</script>

主要类别：
子类别：
我看得见
变量MyCategories=[{
“类别”：[{
“类别”：“类别1”
}, {
“类别”：“类别2”
}],
“类型”：“类型1”
}, {
“类别”：[{
“类别”：“类别3”
}, {
“类别”：“类别4”
}],
“类型”：“类型2”
}];
var initialData=[{
类别：“移动”，
产品：“诺基亚”
}];
var ContactsModel=功能（触点）{
var self=这个；
self.contacts=ko.observearray（ko.utils.arrayMap）（触点，功能（触点）{
返回{
mycategory:ko.可观察（contact.category），
产品：ko.可观察（触点.产品）
};
}));
};
ko.应用绑定（新联系人模型（初始数据））；

如果我删除选项value:“Type”，则“子类别”将获得正确的项目。但表行的可见性未按预期工作。 如果我有选项value:“Type”，则不会填充“子类别”。而且，当我更改“MainCategories”的选项1或2次时，只有可见性工作正常

请帮我找出我做错了什么。

---

谢谢，

我读了你的问题，我有一种感觉，如果你不能充分解决它，你可以应用它-

*问题*-

您需要有一个使用Knockout的级联下拉列表来选择一个值，并将您的observable设置为与子select的选定对象相等

*解决方案*-

使用“计算”使第二个下拉列表依赖于第一个下拉列表。示例-

var selectedParent = ko.observable();

var parentCategories = ko.observableArray(MyCategories);

var childCategories = ko.computed(function () {
    if (!selectedParent()) { return new Array(); }
    var childArray = [];
    // get the values you want for the child here
    return childArray;
});

通过添加if（！selectedParent（）），可以使子类别依赖于selectedParent。每当选择更改时，子类别将自动更新

那么你的观点可以是这样的-

<td>MainCategories:
                <select data-bind='options: parentCategories, value: selectedParent, optionsText: "Type", optionsValue: "Type",optionsCaption: "Select..."'></select>
            </td>
            <td> SubCategories:
                <select data-bind='options: childCategories, optionsText: "Category", optionsCaption: "Select...", value: $parent.product'></select>
                <!-- /ko -->
            </td>

主要类别：
子类别：