使用Knockout.js在网格中创建依赖的下拉列表

Question

我正在尝试使用两个下拉列创建数据绑定表.但是,右下拉列表中可用的选项取决于左下拉列表中选择的内容.例如,想象DropdownA有一个州的列表,并DropdownB有一个州的城市列表.我的模板看起来像这样:

<!-- ko foreach: MeasurementInfoPlans -->
<tr>
   <td><select id="DropdownA" data-bind="options: $root.AllStates, optionsValue: 'State', optionsText: 'Name', value: StateId"></select></td>
   <td><select id="DropdownB" data-bind="options: $root.AllCities, optionsValue: 'City', optionsText: 'Name', value: CityId"></select></td>
</tr>
<!-- /ko -->

现在,DropdownB显示每个项目$root.AllCities.但是,我希望它只显示具有State所选值的属性的城市DropdownA.

我在网上找到了关于如何使用计算的observable定义依赖下拉列表的各种示例,但是这些示例假设您只有一个源下拉列表(例如State).在我的例子中,我需要在网格中创建任意数量的下拉对.有没有人有一个如何做到这一点的例子？

Answer 1

我会将城市放在state对象上,然后将它们作为computed行项目进行跟踪,因为它对于状态选择很有意义.这是一个小提琴

HTML:

<select data-bind="options: $parent.states,
                   optionsText: 'name',
                   value: state"></select>
<select data-bind="options: cities, value: city"></select>

JS:

    self.state = ko.observable("");
    self.city = ko.observable("");
    self.cities = ko.computed(function(){
        if(self.state() == "" || self.state().cities == undefined)
            return [];
        return self.state().cities;
    });