HTML Web表单的国家/地区下拉列表

Posted 2021-05-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML Web表单的国家/地区下拉列表相关的知识，希望对你有一定的参考价值。

&lt;select&gt;
    &lt;option value=&quot;  &quot; selected&gt;(please select a country)&lt;/option&gt;
    &lt;option value=&quot;--&quot;&gt;none&lt;/option&gt;
    &lt;option value=&quot;AF&quot;&gt;Afghanistan&lt;/option&gt;
    &lt;option value=&quot;AL&quot;&gt;Albania&lt;/option&gt;
    &lt;option value=&quot;DZ&quot;&gt;Algeria&lt;/option&gt;
    &lt;option value=&quot;AS&quot;&gt;American Samoa&lt;/option&gt;
    &lt;option value=&quot;AD&quot;&gt;Andorra&lt;/option&gt;
    &lt;option value=&quot;AO&quot;&gt;Angola&lt;/option&gt;
    &lt;option value=&quot;AI&quot;&gt;Anguilla&lt;/option&gt;
    &lt;option value=&quot;AQ&quot;&gt;Antarctica&lt;/option&gt;
    &lt;option value=&quot;AG&quot;&gt;Antigua and Barbuda&lt;/option&gt;
    &lt;option value=&quot;AR&quot;&gt;Argentina&lt;/option&gt;
    &lt;option value=&quot;AM&quot;&gt;Armenia&lt;/option&gt;
    &lt;option value=&quot;AW&quot;&gt;Aruba&lt;/option&gt;
    &lt;option value=&quot;AU&quot;&gt;Australia&lt;/option&gt;
    &lt;option value=&quot;AT&quot;&gt;Austria&lt;/option&gt;
    &lt;option value=&quot;AZ&quot;&gt;Azerbaijan&lt;/option&gt;
    &lt;option value=&quot;BS&quot;&gt;Bahamas&lt;/option&gt;
    &lt;option value=&quot;BH&quot;&gt;Bahrain&lt;/option&gt;
    &lt;option value=&quot;BD&quot;&gt;Bangladesh&lt;/option&gt;
    &lt;option value=&quot;BB&quot;&gt;Barbados&lt;/option&gt;
    &lt;option value=&quot;BY&quot;&gt;Belarus&lt;/option&gt;
    &lt;option value=&quot;BE&quot;&gt;Belgium&lt;/option&gt;
    &lt;option value=&quot;BZ&quot;&gt;Belize&lt;/option&gt;
    &lt;option value=&quot;BJ&quot;&gt;Benin&lt;/option&gt;
    &lt;option value=&quot;BM&quot;&gt;Bermuda&lt;/option&gt;
    &lt;option value=&quot;BT&quot;&gt;Bhutan&lt;/option&gt;
    &lt;option value=&quot;BO&quot;&gt;Bolivia&lt;/option&gt;
    &lt;option value=&quot;BA&quot;&gt;Bosnia and Herzegowina&lt;/option&gt;
    &lt;option value=&quot;BW&quot;&gt;Botswana&lt;/option&gt;
    &lt;option value=&quot;BV&quot;&gt;Bouvet Island&lt;/option&gt;
    &lt;option value=&quot;BR&quot;&gt;Brazil&lt;/option&gt;
    &lt;option value=&quot;IO&quot;&gt;British Indian Ocean Territory&lt;/option&gt;
    &lt;option value=&quot;BN&quot;&gt;Brunei Darussalam&lt;/option&gt;
    &lt;option value=&quot;BG&quot;&gt;Bulgaria&lt;/option&gt;
    &lt;option value=&quot;BF&quot;&gt;Burkina Faso&lt;/option&gt;
    &lt;option value=&quot;BI&quot;&gt;Burundi&lt;/option&gt;
    &lt;option value=&quot;KH&quot;&gt;Cambodia&lt;/option&gt;
    &lt;option value=&quot;CM&quot;&gt;Cameroon&lt;/option&gt;
    &lt;option value=&quot;CA&quot;&gt;Canada&lt;/option&gt;
    &lt;option value=&quot;CV&quot;&gt;Cape Verde&lt;/option&gt;
    &lt;option value=&quot;KY&quot;&gt;Cayman Islands&lt;/option&gt;
    &lt;option value=&quot;CF&quot;&gt;Central African Republic&lt;/option&gt;
    &lt;option value=&quot;TD&quot;&gt;Chad&lt;/option&gt;
    &lt;option value=&quot;CL&quot;&gt;Chile&lt;/option&gt;
    &lt;option value=&quot;CN&quot;&gt;China&lt;/option&gt;
    &lt;option value=&quot;CX&quot;&gt;Christmas Island&lt;/option&gt;
    &lt;option value=&quot;CC&quot;&gt;Cocos (Keeling) Islands&lt;/option&gt;
    &lt;option value=&quot;CO&quot;&gt;Colombia&lt;/option&gt;
    &lt;option value=&quot;KM&quot;&gt;Comoros&lt;/option&gt;
    &lt;option value=&quot;CG&quot;&gt;Congo&lt;/option&gt;
    &lt;option value=&quot;CD&quot;&gt;Congo, the Democratic Republic of the&lt;/option&gt;
    &lt;option value=&quot;CK&quot;&gt;Cook Islands&lt;/option&gt;
    &lt;option value=&quot;CR&quot;&gt;Costa Rica&lt;/option&gt;
    &lt;option value=&quot;CI&quot;&gt;Cote d'Ivoire&lt;/option&gt;
    &lt;option value=&quot;HR&quot;&gt;Croatia (Hrvatska)&lt;/option&gt;
    &lt;option value=&quot;CU&quot;&gt;Cuba&lt;/option&gt;
    &lt;option value=&quot;CY&quot;&gt;Cyprus&lt;/option&gt;
    &lt;option value=&quot;CZ&quot;&gt;Czech Republic&lt;/option&gt;
    &lt;option value=&quot;DK&quot;&gt;Denmark&lt;/option&gt;
    &lt;option value=&quot;DJ&quot;&gt;Djibouti&lt;/option&gt;
    &lt;option value=&quot;DM&quot;&gt;Dominica&lt;/option&gt;
    &lt;option value=&quot;DO&quot;&gt;Dominican Republic&lt;/option&gt;
    &lt;option value=&quot;TP&quot;&gt;East Timor&lt;/option&gt;
    &lt;option value=&quot;EC&quot;&gt;Ecuador&lt;/option&gt;
    &lt;option value=&quot;EG&quot;&gt;Egypt&lt;/option&gt;
    &lt;option value=&quot;SV&quot;&gt;El Salvador&lt;/option&gt;
    &lt;option value=&quot;GQ&quot;&gt;Equatorial Guinea&lt;/option&gt;
    &lt;option value=&quot;ER&quot;&gt;Eritrea&lt;/option&gt;
    &lt;option value=&quot;EE&quot;&gt;Estonia&lt;/option&gt;
    &lt;option value=&quot;ET&quot;&gt;Ethiopia&lt;/option&gt;
    &lt;option value=&quot;FK&quot;&gt;Falkland Islands (Malvinas)&lt;/option&gt;
    &lt;option value=&quot;FO&quot;&gt;Faroe Islands&lt;/option&gt;
    &lt;option value=&quot;FJ&quot;&gt;Fiji&lt;/option&gt;
    &lt;option value=&quot;FI&quot;&gt;Finland&lt;/option&gt;
    &lt;option value=&quot;FR&quot;&gt;France&lt;/option&gt;
    &lt;option value=&quot;FX&quot;&gt;France, Metropolitan&lt;/option&gt;
    &lt;option value=&quot;GF&quot;&gt;French Guiana&lt;/option&gt;
    &lt;option value=&quot;PF&quot;&gt;French Polynesia&lt;/option&gt;
    &lt;option value=&quot;TF&quot;&gt;French Southern Territories&lt;/option&gt;
    &lt;option value=&quot;GA&quot;&gt;Gabon&lt;/option&gt;
    &lt;option value=&quot;GM&quot;&gt;Gambia&lt;/option&gt;
    &lt;option value=&quot;GE&quot;&gt;Georgia&lt;/option&gt;
    &lt;option value=&quot;DE&quot;&gt;Germany&lt;/option&gt;
    &lt;option value=&quot;GH&quot;&gt;Ghana&lt;/option&gt;
    &lt;option value=&quot;GI&quot;&gt;Gibraltar&lt;/option&gt;
    &lt;option value=&quot;GR&quot;&gt;Greece&lt;/option&gt;
    &lt;option value=&quot;GL&quot;&gt;Greenland&lt;/option&gt;
    &lt;option value=&quot;GD&quot;&gt;Grenada&lt;/option&gt;
    &lt;option value=&quot;GP&quot;&gt;Guadeloupe&lt;/option&gt;
    &lt;option value=&quot;GU&quot;&gt;Guam&lt;/option&gt;
    &lt;option value=&quot;GT&quot;&gt;Guatemala&lt;/option&gt;
    &lt;option value=&quot;GN&quot;&gt;Guinea&lt;/option&gt;
    &lt;option value=&quot;GW&quot;&gt;Guinea-Bissau&lt;/option&gt;
    &lt;option value=&quot;GY&quot;&gt;Guyana&lt;/option&gt;
    &lt;option value=&quot;HT&quot;&gt;Haiti&lt;/option&gt;
    &lt;option value=&quot;HM&quot;&gt;Heard and Mc Donald Islands&lt;/option&gt;
    &lt;option value=&quot;VA&quot;&gt;Holy See (Vatican City State)&lt;/option&gt;
    &lt;option value=&quot;HN&quot;&gt;Honduras&lt;/option&gt;
    &lt;option value=&quot;HK&quot;&gt;Hong Kong&lt;/option&gt;
    &lt;option value=&quot;HU&quot;&gt;Hungary&lt;/option&gt;
    &lt;option value=&quot;IS&quot;&gt;Iceland&lt;/option&gt;
    &lt;option value=&quot;IN&quot;&gt;India&lt;/option&gt;
    &lt;option value=&quot;ID&quot;&gt;Indonesia&lt;/option&gt;
    &lt;option value=&quot;IR&quot;&gt;Iran (Islamic Republic of)&lt;/option&gt;
    &lt;option value=&quot;IQ&quot;&gt;Iraq&lt;/option&gt;
    &lt;option value=&quot;IE&quot;&gt;Ireland&lt;/option&gt;
    &lt;option value=&quot;IL&quot;&gt;Israel&lt;/option&gt;
    &lt;option value=&quot;IT&quot;&gt;Italy&lt;/option&gt;
    &lt;option value=&quot;JM&quot;&gt;Jamaica&lt;/option&gt;
    &lt;option value=&quot;JP&quot;&gt;Japan&lt;/option&gt;
    &lt;option value=&quot;JO&quot;&gt;Jordan&lt;/option&gt;
    &lt;option value=&quot;KZ&quot;&gt;Kazakhstan&lt;/option&gt;
    &lt;option value=&quot;KE&quot;&gt;Kenya&lt;/option&gt;
    &lt;option value=&quot;KI&quot;&gt;Kiribati&lt;/option&gt;
    &lt;option value=&quot;KP&quot;&gt;Korea, Democratic People's Republic of&lt;/option&gt;
    &lt;option value=&quot;KR&quot;&gt;Korea, Republic of&lt;/option&gt;
    &lt;option value=&quot;KW&quot;&gt;Kuwait&lt;/option&gt;
    &lt;option value=&quot;KG&quot;&gt;Kyrgyzstan&lt;/option&gt;
    &lt;option value=&quot;LA&quot;&gt;Lao People's Democratic Republic&lt;/option&gt;
    &lt;option value=&quot;LV&quot;&gt;Latvia&lt;/option&gt;
    &lt;option value=&quot;LB&quot;&gt;Lebanon&lt;/option&gt;
    &lt;option value=&quot;LS&quot;&gt;Lesotho&lt;/option&gt;
    &lt;option value=&quot;LR&quot;&gt;Liberia&lt;/option&gt;
    &lt;option value=&quot;LY&quot;&gt;Libyan Arab Jamahiriya&lt;/option&gt;
    &lt;option value=&quot;LI&quot;&gt;Liechtenstein&lt;/option&gt;
    &lt;option value=&quot;LT&quot;&gt;Lithuania&lt;/option&gt;
    &lt;option value=&quot;LU&quot;&gt;Luxembourg&lt;/option&gt;
    &lt;option value=&quot;MO&quot;&gt;Macau&lt;/option&gt;
    &lt;option value=&quot;MK&quot;&gt;Macedonia, The Former Yugoslav Republic of&lt;/option&gt;
    &lt;option value=&quot;MG&quot;&gt;Madagascar&lt;/option&gt;
    &lt;option value=&quot;MW&quot;&gt;Malawi&lt;/option&gt;
    &lt;option value=&quot;MY&quot;&gt;Malaysia&lt;/option&gt;
    &lt;option value=&quot;MV&quot;&gt;Maldives&lt;/option&gt;
    &lt;option value=&quot;ML&quot;&gt;Mali&lt;/option&gt;
    &lt;option value=&quot;MT&quot;&gt;Malta&lt;/option&gt;
    &lt;option value=&quot;MH&quot;&gt;Marshall Islands&lt;/option&gt;
    &lt;option value=&quot;MQ&quot;&gt;Martinique&lt;/option&gt;
    &lt;option value=&quot;MR&quot;&gt;Mauritania&lt;/option&gt;
    &lt;option value=&quot;MU&quot;&gt;Mauritius&lt;/option&gt;
    &lt;option value=&quot;YT&quot;&gt;Mayotte&lt;/option&gt;
    &lt;option value=&quot;MX&quot;&gt;Mexico&lt;/option&gt;
    &lt;option value=&quot;FM&quot;&gt;Micronesia, Federated States of&lt;/option&gt;
    &lt;option value=&quot;MD&quot;&gt;Moldova, Republic of&lt;/option&gt;
    &lt;option value=&quot;MC&quot;&gt;Monaco&lt;/option&gt;
    &lt;option value=&quot;MN&quot;&gt;Mongolia&lt;/option&gt;
    &lt;option value=&quot;MS&quot;&gt;Montserrat&lt;/option&gt;
    &lt;option value=&quot;MA&quot;&gt;Morocco&lt;/option&gt;
    &lt;option value=&quot;MZ&quot;&gt;Mozambique&lt;/option&gt;
    &lt;option value=&quot;MM&quot;&gt;Myanmar&lt;/option&gt;
    &lt;option value=&quot;NA&quot;&gt;Namibia&lt;/option&gt;
    &lt;option value=&quot;NR&quot;&gt;Nauru&lt;/option&gt;
    &lt;option value=&quot;NP&quot;&gt;Nepal&lt;/option&gt;
    &lt;option value=&quot;NL&quot;&gt;Netherlands&lt;/option&gt;
    &lt;option value=&quot;AN&quot;&gt;Netherlands Antilles&lt;/option&gt;
    &lt;option value=&quot;NC&quot;&gt;New Caledonia&lt;/option&gt;
    &lt;option value=&quot;NZ&quot;&gt;New Zealand&lt;/option&gt;
    &lt;option value=&quot;NI&quot;&gt;Nicaragua&lt;/option&gt;
    &lt;option value=&quot;NE&quot;&gt;Niger&lt;/option&gt;
    &lt;option value=&quot;NG&quot;&gt;Nigeria&lt;/option&gt;
    &lt;option value=&quot;NU&quot;&gt;Niue&lt;/option&gt;
    &lt;option value=&quot;NF&quot;&gt;Norfolk Island&lt;/option&gt;
    &lt;option value=&quot;MP&quot;&gt;Northern Mariana Islands&lt;/option&gt;
    &lt;option value=&quot;NO&quot;&gt;Norway&lt;/option&gt;
    &lt;option value=&quot;OM&quot;&gt;Oman&lt;/option&gt;
    &lt;option value=&quot;PK&quot;&gt;Pakistan&lt;/option&gt;
    &lt;option value=&quot;PW&quot;&gt;Palau&lt;/option&gt;
    &lt;option value=&quot;PA&quot;&gt;Panama&lt;/option&gt;
    &lt;option value=&quot;PG&quot;&gt;Papua New Guinea&lt;/option&gt;
    &lt;option value=&quot;PY&quot;&gt;Paraguay&lt;/option&gt;
    &lt;option value=&quot;PE&quot;&gt;Peru&lt;/option&gt;
    &lt;option value=&quot;PH&quot;&gt;Philippines&lt;/option&gt;
    &lt;option value=&quot;PN&quot;&gt;Pitcairn&lt;/option&gt;
    &lt;option value=&quot;PL&quot;&gt;Poland&lt;/option&gt;
    &lt;option value=&quot;PT&quot;&gt;Portugal&lt;/option&gt;
    &lt;option value=&quot;PR&quot;&gt;Puerto Rico&lt;/option&gt;
    &lt;option value=&quot;QA&quot;&gt;Qatar&lt;/option&gt;
    &lt;option value=&quot;RE&quot;&gt;Reunion&lt;/option&gt;
    &lt;option value=&quot;RO&quot;&gt;Romania&lt;/option&gt;
    &lt;option value=&quot;RU&quot;&gt;Russian Federation&lt;/option&gt;
    &lt;option value=&quot;RW&quot;&gt;Rwanda&lt;/option&gt;
    &lt;option value=&quot;KN&quot;&gt;Saint Kitts and Nevis&lt;/option&gt; 
    &lt;option value=&quot;LC&quot;&gt;Saint LUCIA&lt;/option&gt;
    &lt;option value=&quot;VC&quot;&gt;Saint Vincent and the Grenadines&lt;/option&gt;
    &lt;option value=&quot;WS&quot;&gt;Samoa&lt;/option&gt;
    &lt;option value=&quot;SM&quot;&gt;San Marino&lt;/option&gt;
    &lt;option value=&quot;ST&quot;&gt;Sao Tome and Principe&lt;/option&gt; 
    &lt;option value=&quot;SA&quot;&gt;Saudi Arabia&lt;/option&gt;
    &lt;option value=&quot;SN&quot;&gt;Senegal&lt;/option&gt;
    &lt;option value=&quot;SC&quot;&gt;Seychelles&lt;/option&gt;
    &lt;option value=&quot;SL&quot;&gt;Sierra Leone&lt;/option&gt;
    &lt;option value=&quot;SG&quot;&gt;Singapore&lt;/option&gt;
    &lt;option value=&quot;SK&quot;&gt;Slovakia (Slovak Republic)&lt;/option&gt;
    &lt;option value=&quot;SI&quot;&gt;Slovenia&lt;/option&gt;
    &lt;option value=&quot;SB&quot;&gt;Solomon Islands&lt;/option&gt;
    &lt;option value=&quot;SO&quot;&gt;Somalia&lt;/option&gt;
    &lt;option value=&quot;ZA&quot;&gt;South Africa&lt;/option&gt;
    &lt;option value=&quot;GS&quot;&gt;South Georgia and the South Sandwich Islands&lt;/option&gt;
    &lt;option value=&quot;ES&quot;&gt;Spain&lt;/option&gt;
    &lt;option value=&quot;LK&quot;&gt;Sri Lanka&lt;/option&gt;
    &lt;option value=&quot;SH&quot;&gt;St. Helena&lt;/option&gt;
    &lt;option value=&quot;PM&quot;&gt;St. Pierre and Miquelon&lt;/option&gt;
    &lt;option value=&quot;SD&quot;&gt;Sudan&lt;/option&gt;
    &lt;option value=&quot;SR&quot;&gt;Suriname&lt;/option&gt;
    &lt;option value=&quot;SJ&quot;&gt;Svalbard and Jan Mayen Islands&lt;/option&gt;
    &lt;option value=&quot;SZ&quot;&gt;Swaziland&lt;/option&gt;
    &lt;option value=&quot;SE&quot;&gt;Sweden&lt;/option&gt;
    &lt;option value=&quot;CH&quot;&gt;Switzerland&lt;/option&gt;
    &lt;option value=&quot;SY&quot;&gt;Syrian Arab Republic&lt;/option&gt;
    &lt;option value=&quot;TW&quot;&gt;Taiwan, Province of China&lt;/option&gt;
    &lt;option value=&quot;TJ&quot;&gt;Tajikistan&lt;/option&gt;
    &lt;option value=&quot;TZ&quot;&gt;Tanzania, United Republic of&lt;/option&gt;
    &lt;option value=&quot;TH&quot;&gt;Thailand&lt;/option&gt;
    &lt;option value=&quot;TG&quot;&gt;Togo&lt;/option&gt;
    &lt;option value=&quot;TK&quot;&gt;Tokelau&lt;/option&gt;
    &lt;option value=&quot;TO&quot;&gt;Tonga&lt;/option&gt;
    &lt;option value=&quot;TT&quot;&gt;Trinidad and Tobago&lt;/option&gt;
    &lt;option value=&quot;TN&quot;&gt;Tunisia&lt;/option&gt;
    &lt;option value=&quot;TR&quot;&gt;Turkey&lt;/option&gt;
    &lt;option value=&quot;TM&quot;&gt;Turkmenistan&lt;/option&gt;
    &lt;option value=&quot;TC&quot;&gt;Turks and Caicos Islands&lt;/option&gt;
    &lt;option value=&quot;TV&quot;&gt;Tuvalu&lt;/option&gt;
    &lt;option value=&quot;UG&quot;&gt;Uganda&lt;/option&gt;
    &lt;option value=&quot;UA&quot;&gt;Ukraine&lt;/option&gt;
    &lt;option value=&quot;AE&quot;&gt;United Arab Emirates&lt;/option&gt;
    &lt;option value=&quot;GB&quot;&gt;United Kingdom&lt;/option&gt;
    &lt;option value=&quot;US&quot;&gt;United States&lt;/option&gt;
    &lt;option value=&quot;UM&quot;&gt;United States Minor Outlying Islands&lt;/option&gt;
    &lt;option value=&quot;UY&quot;&gt;Uruguay&lt;/option&gt;
    &lt;option value=&quot;UZ&quot;&gt;Uzbekistan&lt;/option&gt;
    &lt;option value=&quot;VU&quot;&gt;Vanuatu&lt;/option&gt;
    &lt;option value=&quot;VE&quot;&gt;Venezuela&lt;/option&gt;
    &lt;option value=&quot;VN&quot;&gt;Viet Nam&lt;/option&gt;
    &lt;option value=&quot;VG&quot;&gt;Virgin Islands (British)&lt;/option&gt;
    &lt;option value=&quot;VI&quot;&gt;Virgin Islands (U.S.)&lt;/option&gt;
    &lt;option value=&quot;WF&quot;&gt;Wallis and Futuna Islands&lt;/option&gt;
    &lt;option value=&quot;EH&quot;&gt;Western Sahara&lt;/option&gt;
    &lt;option value=&quot;YE&quot;&gt;Yemen&lt;/option&gt;
    &lt;option value=&quot;YU&quot;&gt;Yugoslavia&lt;/option&gt;
    &lt;option value=&quot;ZM&quot;&gt;Zambia&lt;/option&gt;
    &lt;option value=&quot;ZW&quot;&gt;Zimbabwe&lt;/option&gt;
&lt;/select&gt;

如何在选择时使用 formArray 索引加载动态下拉数据

【中文标题】如何在选择时使用 formArray 索引加载动态下拉数据【英文标题】：How to load dynamic dropown data using the formArray index on selection 【发布时间】：2021-01-08 17:53:18 【问题描述】：

我有一个场景，比如添加/删除带有多个表单控件的表单组。

例如，

第一个下拉列表是国家/地区列表，第二个下拉列表是基于所选国家/地区的州列表，最后一个输入控件是 cmets。

问题是，当我加载页面时，默认情况下加载国家/地区下拉数据加载国家/地区 api，但根据所选国家/地区未正确加载各州。当我更改国家/地区时，所有其他国家/地区的下拉列表也发生了类似的变化。

例如，

这是我的尝试 HTML

<form [formGroup]='formName'>
              <div formArrayName="controllerArray" class="ui-g ui-g-12 ui-g-nopad " >
                <div  class="ui-g  ui-g-12 ui-g-nopad " *ngFor="let item of formName.controls.controllerArray.controls; let i=index" [formGroupName]="i">  
                  <div class="ui-md-4">                   
                    <label class="mandatory"
                  > labels["STATE_OF_INCORPORATION_FILE_NUMBER"] 
                  <span class="colon"></span>
                </label>           

                <select formControlName="select1" class="ui-inputtext" [(ngModel)]="item.controls.select1.value" (change)="changeAction($event,i)"> 
                  <option>--Select--</option>
                  <option *ngFor="let c of countryOptions" [value]="c.value">c.label</option>
                 
                </select>
              </div>
              <div class="ui-md-4">
                <label class="lbl-hidden"> State </label>
                <select formControlName="select2" class="ui-inputtext" [(ngModel)]="item.controls.select2.value"> 
                  <option>--Select--</option>
                  <option *ngFor="let b of businessStateOptions" [value]="b.value">b.label</option>
                 
                </select>
              </div>
              <div class="ui-md-3">
                <label class="lbl-hidden"> comments  </label>
                <input
                  type="text"
                  pInputText
                  class="form-control"
                  formControlName="input"    
                />
                </div>
                <div class="ui-md-1">
                  <label class="lbl-hidden"> State </label>
                  <br/>
                  <button (click)='removeInput(i)'  style="min-width: auto;"  pButton icon="fa fa-minus"></button>
                </div>
                </div>
              </div>
            </form>
            
            <button class="add-remove-btn" pButton (click)='addInput()' icon="fa fa-plus"></button>`

Angular8 TS

import  Component, OnInit, ViewChild  from '@angular/core'
import  FormBuilder, Validators, FormArray  from '@angular/forms';

export class EntityEditComponent implements OnInit 
public countryOptions = [];

formName =this.fb.group(
    controllerArray: this.fb.array([])
  )  

ngOnInit()     
 this.countryOptions = ["label":"United States","value":"US","label":"Canada","value":"CA"]


 changeAction(e, index)  
  if(index == 1 )      // Here I'm trying to change the data if country is selected CA
 let businessStateOptions = []
businessStateOptions= [label:"Alberta",value:"CA"]

const controlArray = <FormArray> this.formName.get('controllerArray');
    controlArray.controls[index].get('select2').setValue( businessStateOptions);
      




addInput() (this.formName.get('controllerArray') as FormArray).push(this.fb.group(select1:'', select2:'',input:'')) 

removeInput(index)  this.formName.controls.controllerArray["controls"].splice(index,1)

预期结果是，

当我更改国家/地区时，需要将所选国家/地区的州加载到州下拉列表中，而不影响任何其他下拉列表。

【问题讨论】：

拜托哥们，它成功了吗？不，它不工作。 【参考方案1】：

你的方法有点让自己陷入困境。您将反应式表单与模板驱动的表单混合在一起。您首先需要使用ngModel 删除任何内容。然后删除您的 changeAction 方法。然后将[value] 更改为[ngValue]。然后在您的select2 下拉列表中更改您根据item 国家值调用相关状态的方式。像这样的：

<form [formGroup]='formName'>
              <div formArrayName="controllerArray" class="ui-g ui-g-12 ui-g-nopad " >
                <div  class="ui-g  ui-g-12 ui-g-nopad " *ngFor="let item of formName.controls.controllerArray.controls; let i=index" [formGroupName]="i">  
                  <div class="ui-md-4">                   
                    <label class="mandatory"
                  > labels["STATE_OF_INCORPORATION_FILE_NUMBER"] 
                  <span class="colon"></span>
                </label>           

                <select formControlName="select1" class="ui-inputtext"> 
                  <option>--Select--</option>
                  <option *ngFor="let c of countryOptions" [ngValue]="c.value">c.label</option>
                 
                </select>
              </div>
              <div class="ui-md-4">
                <label class="lbl-hidden"> State </label>
                <select formControlName="select2" class="ui-inputtext"> 
                  <option>--Select--</option>
                  <option *ngFor="let b of getRelevantStates(item.controls.select1.value)" [ngValue]="b.value">b.label</option>
                 
                </select>
              </div>
              <div class="ui-md-3">
                <label class="lbl-hidden"> comments  </label>
                <input
                  type="text"
                  pInputText
                  class="form-control"
                  formControlName="input" />
                </div>
                <div class="ui-md-1">
                  <label class="lbl-hidden"> State </label>
                  <br/>
                  <button (click)='removeInput(i)'  style="min-width: auto;"  pButton icon="fa fa-minus"></button>
                </div>
                </div>
              </div>
            </form>
            
            <button class="add-remove-btn" pButton (click)='addInput()' icon="fa fa-plus"></button>

您还需要创建一个新方法来根据表单数组中的此项调用相关状态：

    getRelevantStates(countryId)
var states = [];
    // Return states based on countryId.
return states;

@安德鲁： 按照上面的逻辑，getRelevantStates() 一直调用，最终各个状态数据都不会被加载。

【讨论】：

感谢您的专业解决方案。但这里的问题是，getRelevantStates() 方法不断调用状态 API，因为它处于循环 *ngFor 中。我们最终无法绑定数据。我附上了截图。啊，我以为您已经掌握了状态数据，而无需进行 api 查找。下一个最好的事情是创建一个状态表单数组。然后在您更改 select1 之后，您执行您的 states api 调用并将其插入到您的 formarray 中。此状态 formarray 将是 select1 和 select2 的兄弟属性。

以上是关于HTML Web表单的国家/地区下拉列表的主要内容，如果未能解决你的问题，请参考以下文章

Web窗体的国家/地区下拉列表

HTML 国家/地区下拉列表，国家/地区名称为值。

Web窗体的国家/地区下拉列表（中文版）

HTML HTML：下拉菜单的国家/地区列表

如何在选择时使用 formArray 索引加载动态下拉数据

在 Woocommerce 中将结帐国家/地区下拉列表设为只读