Jquery 如何使用knockoutjs从下拉列表中自动选择值?
我有两个下拉列表。我想从第一个地址中选择一个地址,然后根据countrycode自动从第二个下拉列表中选择一个国家。我有一个subscribe方法,当选择地址时,它永远不会被触发。以下是我到目前为止所做的,我正在使用KnockoutJsJquery 如何使用knockoutjs从下拉列表中自动选择值?,jquery,knockout.js,Jquery,Knockout.js,我有两个下拉列表。我想从第一个地址中选择一个地址,然后根据countrycode自动从第二个下拉列表中选择一个国家。我有一个subscribe方法,当选择地址时,它永远不会被触发。以下是我到目前为止所做的,我正在使用KnockoutJs 在此处输入代码 尝试使用计算方法,而不是订阅。检查下面的代码 <ul data-bind="foreach: items"> <li> <select data-bind="options: $parent.Address
在此处输入代码
尝试使用计算方法,而不是订阅。检查下面的代码
<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));
-
变量项=函数(名称){
var self=这个;
self.state=ko.可观察(“”);
self.country=ko.可观察(“”);
self.Countries=ko.computed(函数(){
if(self.state()==“”| | self.state().Countries==未定义)
返回[];
返回self.state().国家;
});
};
var ViewModel=函数(数据){
var self=这个;
self.Address=数据;
self.items=ko.observearray([新项目(“第一”)]);
};
};
风险值数据=[
{名称:“12 ball road”,国家:[
“英国”、“英国1”、“英国2”
]},{名称:“肯特路12号”,国家:[
“PK”、“PK1”、“PK2”
]},{名称:“11 withy close”,国家:[
“DL”、“DL2”、“DL3”
]},
];
应用绑定(新视图模型(数据));
您的代码中有许多语法错误,请参阅最终版本。我将您的订阅功能重写如下:
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
应该是可观察的,而不仅仅是可观察的。所有这些都在我上面提到的JSFIDLE中。您检查过答案了吗?他们中有人成功了吗?如果是的话,你能接受吗?