Question

我正在尝试使用具有值的选项激活两个选择字段，例如。 <option value='...'>...</option>使用Knockoutjs。

它会根据第一个选择字段中的选定值填充第二个选择字段选项。

仅供参考，我找到了http://knockoutjs.com/examples/cartEditor.html，但这并没有使用optionsValue，所以它没有帮助。

以下是我的观点：

<select data-bind="options: list,
                   optionsCaption: 'Select...',
                   optionsText: 'location',
                   optionsValue: 'code',
                   value: selectedRegion">                 
</select>
<!-- ko with : selectedRegion -->
<select data-bind="options: countries,
                   optionsCaption: 'Select...',
                   optionsText: 'location',
                   optionsValue: 'code',
                   value: $parent.selectedCountry">
</select>
<!-- /ko  -->

以下是我的观点：

var packageData = [
    {
        code : "EU",
        location: 'Euprope',
        countries : [
            { location: "England", code: 'EN' },
            { location: "France", code: 'FR' }
        ]
    },
    {
        code : "AS",
        location: 'Asia',
        countries : [
            { location: "Korea", code: 'KO' },
            { location: "Japan", code: 'JP' },
        ]
    }
];

function viewModel(list, addons) {
    this.list = list;
    this.selectedRegion = ko.observable();
    this.selectedCountry = ko.observable();
}

ko.applyBindings(new viewModel(packageData));

如果在上面运行，我会收到以下JS错误。

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: options: countries,
                   optionsCaption: 'Select...',
                   optionsText: 'location',
                   optionsValue: 'code',
                   value: $parent.selectedCountry
Message: countries is not defined

如果我丢失'optionsValue：'代码，'在我的视图中的行'（一个用于第一个选择字段，另一个用于第二个选择字段。但是这不会填充选项值，这不是我想要的。

例如，<option value>...</option>代替<option value="[country code]">...</option>。

有人可以帮助我修改我的代码，以便获得<option value="[country code]">...<option>吗？

非常感谢。

Answer 1

问题在于，当您设置optionsValue属性selectedRegion时，现在只填充代码。 code属性下面没有countries属性，因此绑定失败。解决此问题的一种方法是使用计算的observable，根据selectedRegion代码返回国家/地区。

self.countryList = ko.computed(function () {
    var region = self.selectedRegion();
    var filtered = ko.utils.arrayFirst(self.list, function (item) {
        return item.code == region;
    });
    if (!filtered) {
        return []
    } else {
        return filtered.countries;
    }
});

然后你只需更改绑定即可使用计算：options: $root.countryList。

工作示例：http://jsfiddle.net/infiniteloops/AF2ct/

Knockoutjs <select>基于另一个</select>无效

1 个答案: