使用JSON的Knockout.js级联选项

时间:2013-06-10 14:44:04

标签: javascript json knockout.js

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

]

}

1 个答案:

答案 0 :(得分:1)

尝试将HTML更改为:

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