如何使用淘汰赛从复杂对象的选择选项中设置值？

Posted 2023-03-27

【中文标题】如何使用淘汰赛从复杂对象的选择选项中设置值？

【英文标题】：How to set value in select options from complex objects using knockout?

【发布时间】：2021-11-30 05:21:00

【问题描述】：

如何从给定对象创建两个选择框？ 我需要使用 Country 下拉菜单和 State 下拉菜单创建两个选择选项框。

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"
                
            
    
])

我想使用淘汰赛 JS 创建两个下拉菜单。

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

我不确定如何使用上面给定的对象在剔除中创建两个选择框。

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

【参考方案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>

【讨论】：

函数中的.regions是什么？不确定这个 .region 语法。

你的意思是optional chaining和nullish coalescing operator？