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

Question

我正在尝试创建一个包含两个下拉列的数据绑定(bind)表。但是，右侧下拉列表中可用的选项取决于左侧下拉列表中的选择。例如，假设 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 中选择什么值。

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

Answer 1

我会将城市放在 state 对象上，然后将它们作为行项目上的 computed 进行跟踪，因为它将有一个用于状态选择的可观察对象。这是 a fiddle

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;
    });