如何在使用击倒的复杂对象的选择选项中设置值?

Question

如何从给定对象创建两个选择框?我需要创建两个选择选项框与国家下拉和状态下拉选择。

const optionsList =  ko.observableArray ([
{
'AD':{'name':'Andora'},
'AE':{'name':"United Arab Emirates"},
'AG':{'name':"Antigua & Barbuda"},
'ES':{'name':"Spain", 'regions':{
"22": {
"code": "A Coruсa",
"name": "A Coruña"
},
"23": {
"code": "Alava",
"name": "Alava"
},
"24": {
"code": "Albacete",
"name": "Albacete"
}
"25": {
"code": "Zaragoza",
"name": "Zaragoza"
}
}},
'AT':{'name':"Austria", 'regions':{
"95": {
"code": "WI",
"name": "Wien"
},
"96": {
"code": "NO",
"name": "Niederösterreich"
}
}},
'AU':{'name':"Australia", 'regions':{
"569": {
"code": "ACT",
"name": "Australian Capital Territory"
},
"570": {
"code": "NSW",
"name": "New South Wales"
},
"571": {
"code": "VIC",
"name": "Victoria"
},
"572": {
"code": "QLD",
"name": "Queensland"
}
}}
}
])

我想用knockout JS创建两个下拉列表。

<<ol>

国家列表/gh>

区域列表，如果对象中包含区域列表。(如西班牙、奥地利和澳大利亚)

我不知道如何在knockout中使用上述给定对象创建两个选择框。

感谢您提供的有用信息。

Answer 1

您可以定义一个regions计算，它查看选定的国家并只返回其地区:

const regions = ko.pureComputed(
() => selectedCountry()?.regions ?? []
//        can be null -^         ^^- if a country has no regions,
//                                   return an empty list
);

你发布的数据使用对象，我期望数组，所以它略有不同。下面是一个可运行的示例:

const countries = Object.values(getData());
const selectedCountry = ko.observable(null);
const regions = ko.pureComputed(
() => Object.values(
selectedCountry()?.regions ?? {}
)
);
const selectedRegion = ko.observable(null);

ko.applyBindings({ countries, selectedCountry, regions, selectedRegion });
function getData() {
return {
'AD': {
'name': 'Andora'
},
'AE': {
'name': "United Arab Emirates"
},
'AG': {
'name': "Antigua & Barbuda"
},
'ES': {
'name': "Spain",
'regions': {
"22": {
"code": "A Coruсa",
"name": "A Coruña"
},
"23": {
"code": "Alava",
"name": "Alava"
},
"24": {
"code": "Albacete",
"name": "Albacete"
},
"25": {
"code": "Zaragoza",
"name": "Zaragoza"
}
}
},
'AT': {
'name': "Austria",
'regions': {
"95": {
"code": "WI",
"name": "Wien"
},
"96": {
"code": "NO",
"name": "Niederösterreich"
}
}
},
'AU': {
'name': "Australia",
'regions': {
"569": {
"code": "ACT",
"name": "Australian Capital Territory"
},
"570": {
"code": "NSW",
"name": "New South Wales"
},
"571": {
"code": "VIC",
"name": "Victoria"
},
"572": {
"code": "QLD",
"name": "Queensland"
}
}
}
}
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="
options: countries, 
value: selectedCountry,
optionsText: 'name'
"></select>
<select data-bind="
options: regions, 
value: selectedRegion,
optionsText: 'name',
visible: regions().length
"></select>
<pre data-bind="text: JSON.stringify({ country: selectedCountry(), region: selectedRegion() }, null, 2)"></pre>