如何使用 knockout 在复杂对象的 select 选项中设置值？

Question

如何从给定的对象创建两个 select 框？我需要创建两个 select 选项框，其中包含“国家”下拉列表和“州”下拉列表选择。

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 创建两个下拉列表。

国家列表
如果对象包含对象中的区域列表，则为区域列表。（如西班牙、奥地利和澳大利亚）

我不确定如何使用上面给定的对象在挖空中创建两个 select 框。

感谢您提供任何有用的信息。

Answer 1

您可以定义一个 regions 计算来查看选定的国家和仅 returns 它的区域：

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>

如何使用 knockout 在复杂对象的 select 选项中设置值？

How to set value in select options from complex objects using knockout?

javascript

object

select

knockout.js

knockout-mvc