带有 JSON 的 Knockout.js 级联选项答案

【问题标题】：Knockout.js cascading options with JSON带有 JSON 的 Knockout.js 级联选项
【发布时间】：2013-06-10 23:30:48
【问题描述】：

我一直在尝试制作一个由 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" }
            ]
    }

]

}

【问题讨论】：

标签： javascript json knockout.js

【解决方案1】：

尝试将您的 HTML 更改为：

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

【讨论】：