JSON的Knockout.js级联选项

Question

我一直在尝试制作由JSON填充的级联下拉列表。 我发现在前端使用选择下拉菜单将性别值从“男性”更改为“女性”时。 在此之后，“女性”选项是唯一保留在下拉菜单中的选项。 我认为我正在通过缩小价值来做的事情：性别正在覆盖性别变量？

任何帮助将不胜感激。 我是Knockout的新手，所以我希望我能实现的目标是可能的。

提前致谢。

这是我创建的代码：

HTML：

<select data-bind="options: gender, optionsText: 'name', value: gender"></select><br />
<select data-bind="options: gender().garments, optionsText: 'garmentName'"></select>

JS：

function streckViewModel(){ 

};

$.getJSON("js/garments.json", null, function(garmentData, status, xhr){
streckViewModel = ko.mapping.fromJS(garmentData);
ko.applyBindings(streckViewModel);
});

JSON：

{
"gender":[

    {

        "name" : "male",

            "garments": [
                { "garmentName": "hoodie" },
                { "garmentName": "t-shirt" }
            ]

    },

    {
        "name" : "female",

            "garments": [
                { "garmentName": "hoodie" },
                { "garmentName": "blouse" }
            ]
    }

]

}

Answer 1

尝试将HTML更改为以下内容：

<select data-bind="options: gender, optionsText: 'name', value: selectedGender"></select><br />
<select data-bind="options: selectedGender.garments, optionsText: 'garmentName'"></select>