Question

你如何获得级联下拉列表与淘汰赛一起使用。我似乎无法访问选择列表对象，因此我可以刷新列表。

参见JSFiddle here中的当前代码。

主要问题是当国家/地区下拉列表更改时使用此伪代码。我希望能够使用country id过滤当前行的availableStates集合。

//每当国家/地区发生变化时

self.countryId.subscribe(function () {

    // this pseudo code
    alert(countryId);
    var countryId = self.countryId;
    var filtered = availableStates.filter(function (state) {
        return state.countryId == countryId;

    // how do you bind filtered states to available states for the row ?

    });

}）;

Html：

<div id="CountryList" style="margin-top:40px; margin-bottom:40px">
    <table id="Countries">
        <thead>
            <tr>
                <th>Line No.</th>
                <th>Country</th>
                <th>State</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: stateLines">
            <tr>
                <td data-bind="text: lineNumber"></td>
                <td>
                    <select data-bind="options: $root.availableCountries, value: countryId, optionsValue: 'countryId', optionsText: 'countryName'"></select>
                </td>
                <td>
                    <select data-bind="options: $root.availableStates, optionsValue: 'stateId', optionsText: 'stateName', selectedOptions: selectedStates" multiple="true"></select>
                </td>
            </tr>
        </tbody>
    </table>
</div>

脚本：

function StateLine(lineNumber, initialCountry, initialState) {
    var self = this;
    self.lineNumber = lineNumber;
    self.countryId = ko.observable(initialCountry);
    self.selectedStates = ko.observableArray([initialState]);

    // Whenever the category changes, reset the product selection
    self.countryId.subscribe(function () {

        // this pseudo code
        alert(countryId);
        var countryId = self.countryId;
        var filtered = availableStates.filter(function (state) {
            return state.countryId == countryId;

        // how do you bind filtered states to available states for the row ?

        });

    });
}

function StateViewModel() {
    var self = this;

    self.stateLines = ko.observableArray([]);

    // Get countries
    self.availableCountries = [{
        countryId: "0",
        countryName: "All Countries"
    },{
        countryId: "1",
        countryName: "Brasil"
    }, {
        stateId: "2",
        countryName: "Australia"
    }];

    // Get states
    self.availableStates = [{
        countryId: "1",
        stateId: "1",
        stateName: "Minas Gerais"
    }, {
        countryId: "1",
        stateId: "2",
        stateName: "Espirito Santo"
    }, {
        countryId: "2",
        stateId: "3",
        stateName: "Victoria"
    }, {
        countryId: "2",
        stateId: "4",
        stateName: "New South Wales"
    }];


    self.stateLines.push(new StateLine("Line 1", "0", "1"));
    self.stateLines.push(new StateLine("Line 2", "0", "3"));


} // 

ko.applyBindings(new StateViewModel());

Answer 1

这是

    {
        stateId: "2",
        countryName: "Australia"
    }

或

    {
        countryId: "2",
        countryName: "Australia"
    }

尝试通过传递如下

之类的参数来修改您的订阅事件

 self.countryId.subscribe(function (val) {

    // this pseudo code
    alert(val);
    ----- code here ------ 

 });

检查更新的小提琴here

如果您仍然看到问题，请告诉我。

Answer 2

您需要创建一个计算的observable并根据每行中选定的国家/地区筛选状态，然后使用筛选后的数组作为选项

<强>的Javascript

function StateLine(lineNumber, initialCountry, initialState, states) {
    var self = this;
    self.lineNumber = lineNumber;
    self.countryId = ko.observable(initialCountry);
    self.selectedStates = ko.observableArray([initialState]);
    self.filteredStates = ko.computed( function() {
        return states.filter(function (state) {
            var countryId = self.countryId();
            return countryId === undefined || countryId === '0' || state.countryId == countryId;
        });
    });
}

...

self.stateLines.push(new StateLine("Line 1", "0", "1", self.availableStates));
self.stateLines.push(new StateLine("Line 2", "0", "3", self.availableStates));

<强> HTML

<td>
  <select data-bind="options: filteredStates, optionsValue: 'stateId', optionsText: 'stateName', selectedOptions: selectedStates" multiple="true"></select>
</td>

如何使用Knockout.js获取级联下拉列表以在网格中工作

2 个答案: