Question

我有两个下拉列表。我想从第一个地址中选择一个地址，然后根据国家/地区代码从第二个下拉列表中自动选择一个国家/地区。我有一个订阅方法，在选择地址时永远不会被触发。这是我到目前为止所做的，我正在使用KnockoutJs。

enter code here

http://jsfiddle.net/rayabu1234/bjdwhgzp/

Answer 1

而不是订阅尝试使用计算方法。检查下面的代码

<ul data-bind="foreach: items">
<li>

    <select data-bind="options: $parent.Address,
                       optionsText: 'name',
                       value: state"></select>
    <select data-bind="options: Countries, value: country"></select>
 </li>
</ul>


var Item = function(name){
var self = this;

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

var ViewModel = function(data) {
var self = this;
self.Address = data;
self.items = ko.observableArray([new Item("First")]);
};
};

var data = [
{name: "12 ball road", Countries: [
   "UK", "Uk1", "Uk2" 
]},{name: "12 kent road", Countries: [
   "PK", "PK1", "PK2" 
]},{name: "11 withy close", Countries: [
   "DL", "DL2", "DL3" 
]},
];

 ko.applyBindings(new ViewModel(data));

Answer 2

您的代码中存在许多语法错误，请参阅最终的jsfiddle。我重写了你的订阅功能如下：

this.selectedAddress.subscribe(function(value){
    var country = ko.utils.arrayFirst(self.countriesArray(), function(item) { 
        return item.CountryCode === value; 
    });
    self.selectedCountry(country);
});

其中self是包含视图模型的变量。在您的标记中，您忘记在选项绑定中使用value：

<select data-bind="options: Addresses, optionsText: 'Address', optionsValue: 'CountryCode', value: selectedAddress"></select>

countriesArray应该是一个可观察的阵列，而不仅仅是可观察的。所有这些都在我上面提到的jsfiddle中。

如何使用knockoutjs从下拉列表中自动选择值？

2 个答案: