HTML HTML国家/地区选择框（英文）

Posted

tags:

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

<select name="country">
    <option>Afghanistan</option>
    <option>Albania</option>
    <option>Algeria</option>
    <option>American Samoa</option>
    <option>Andorra</option>
    <option>Angola</option>
    <option>Anguilla</option>
    <option>Antarctica</option>
    <option>Antigua and Barbuda</option>
    <option>Argentina</option>
    <option>Armenia</option>
    <option>Aruba</option>
    <option>Australia</option>
    <option>Austria</option>
    <option>Azerbaijan</option>
    <option>Bahamas</option>
    <option>Bahrain</option>
    <option>Bangladesh</option>
    <option>Barbados</option>
    <option>Belarus</option>
    <option>Belgium</option>
    <option>Belize</option>
    <option>Benin</option>
    <option>Bermuda</option>
    <option>Bhutan</option>
    <option>Bolivia</option>
    <option>Bosnia and Herzegovina</option>
    <option>Botswana</option>
    <option>Bouvet Island</option>
    <option>Brazil</option>
    <option>British Indian Ocean Territory</option>
    <option>Brunei Darussalam</option>
    <option>Bulgaria</option>
    <option>Burkina Faso</option>
    <option>Burundi</option>
    <option>Cambodia</option>
    <option>Cameroon</option>
    <option>Canada</option>
    <option>Cape Verde</option>
    <option>Cayman Islands</option>
    <option>Central African Republic</option>
    <option>Chad</option>
    <option>Chile</option>
    <option>China</option>
    <option>Christmas Island</option>
    <option>Cocos Islands</option>
    <option>Colombia</option>
    <option>Comoros</option>
    <option>Congo</option>
    <option>Congo, Democratic Republic of the</option>
    <option>Cook Islands</option>
    <option>Costa Rica</option>
    <option>Cote d'Ivoire</option>
    <option>Croatia</option>
    <option>Cuba</option>
    <option>Cyprus</option>
    <option>Czech Republic</option>
    <option>Denmark</option>
    <option>Djibouti</option>
    <option>Dominica</option>
    <option>Dominican Republic</option>
    <option>Ecuador</option>
    <option>Egypt</option>
    <option>El Salvador</option>
    <option>Equatorial Guinea</option>
    <option>Eritrea</option>
    <option>Estonia</option>
    <option>Ethiopia</option>
    <option>Falkland Islands</option>
    <option>Faroe Islands</option>
    <option>Fiji</option>
    <option>Finland</option>
    <option>France</option>
    <option>French Guiana</option>
    <option>French Polynesia</option>
    <option>Gabon</option>
    <option>Gambia</option>
    <option>Georgia</option>
    <option>Germany</option>
    <option>Ghana</option>
    <option>Gibraltar</option>
    <option>Greece</option>
    <option>Greenland</option>
    <option>Grenada</option>
    <option>Guadeloupe</option>
    <option>Guam</option>
    <option>Guatemala</option>
    <option>Guinea</option>
    <option>Guinea-Bissau</option>
    <option>Guyana</option>
    <option>Haiti</option>
    <option>Heard Island and McDonald Islands</option>
    <option>Honduras</option>
    <option>Hong Kong</option>
    <option>Hungary</option>
    <option>Iceland</option>
    <option>India</option>
    <option>Indonesia</option>
    <option>Iran</option>
    <option>Iraq</option>
    <option>Ireland</option>
    <option>Israel</option>
    <option>Italy</option>
    <option>Jamaica</option>
    <option>Japan</option>
    <option>Jordan</option>
    <option>Kazakhstan</option>
    <option>Kenya</option>
    <option>Kiribati</option>
    <option>Kuwait</option>
    <option>Kyrgyzstan</option>
    <option>Laos</option>
    <option>Latvia</option>
    <option>Lebanon</option>
    <option>Lesotho</option>
    <option>Liberia</option>
    <option>Libya</option>
    <option>Liechtenstein</option>
    <option>Lithuania</option>
    <option>Luxembourg</option>
    <option>Macao</option>
    <option>Madagascar</option>
    <option>Malawi</option>
    <option>Malaysia</option>
    <option>Maldives</option>
    <option>Mali</option>
    <option>Malta</option>
    <option>Marshall Islands</option>
    <option>Martinique</option>
    <option>Mauritania</option>
    <option>Mauritius</option>
    <option>Mayotte</option>
    <option>Mexico</option>
    <option>Micronesia</option>
    <option>Moldova</option>
    <option>Monaco</option>
    <option>Mongolia</option>
    <option>Montenegro</option>
    <option>Montserrat</option>
    <option>Morocco</option>
    <option>Mozambique</option>
    <option>Myanmar</option>
    <option>Namibia</option>
    <option>Nauru</option>
    <option>Nepal</option>
    <option>Netherlands</option>
    <option>Netherlands Antilles</option>
    <option>New Caledonia</option>
    <option>New Zealand</option>
    <option>Nicaragua</option>
    <option>Niger</option>
    <option>Nigeria</option>
    <option>Norfolk Island</option>
    <option>North Korea</option>
    <option>Norway</option>
    <option>Oman</option>
    <option>Pakistan</option>
    <option>Palau</option>
    <option>Palestinian Territory</option>
    <option>Panama</option>
    <option>Papua New Guinea</option>
    <option>Paraguay</option>
    <option>Peru</option>
    <option>Philippines</option>
    <option>Pitcairn</option>
    <option>Poland</option>
    <option>Portugal</option>
    <option>Puerto Rico</option>
    <option>Qatar</option>
    <option>Romania</option>
    <option>Russian Federation</option>
    <option>Rwanda</option>
    <option>Saint Helena</option>
    <option>Saint Kitts and Nevis</option>
    <option>Saint Lucia</option>
    <option>Saint Pierre and Miquelon</option>
    <option>Saint Vincent and the Grenadines</option>
    <option>Samoa</option>
    <option>San Marino</option>
    <option>Sao Tome and Principe</option>
    <option>Saudi Arabia</option>
    <option>Senegal</option>
    <option>Serbia</option>
    <option>Seychelles</option>
    <option>Sierra Leone</option>
    <option>Singapore</option>
    <option>Slovakia</option>
    <option>Slovenia</option>
    <option>Solomon Islands</option>
    <option>Somalia</option>
    <option>South Africa</option>
    <option>South Georgia</option>
    <option>South Korea</option>
    <option>Spain</option>
    <option>Sri Lanka</option>
    <option>Sudan</option>
    <option>Suriname</option>
    <option>Svalbard and Jan Mayen</option>
    <option>Swaziland</option>
    <option>Sweden</option>
    <option>Switzerland</option>
    <option>Syrian Arab Republic</option>
    <option>Taiwan</option>
    <option>Tajikistan</option>
    <option>Tanzania</option>
    <option>Thailand</option>
    <option>The Former Yugoslav Republic of Macedonia</option>
    <option>Timor-Leste</option>
    <option>Togo</option>
    <option>Tokelau</option>
    <option>Tonga</option>
    <option>Trinidad and Tobago</option>
    <option>Tunisia</option>
    <option>Turkey</option>
    <option>Turkmenistan</option>
    <option>Tuvalu</option>
    <option>Uganda</option>
    <option>Ukraine</option>
    <option>United Arab Emirates</option>
    <option>United Kingdom</option>
    <option>United States</option>
    <option>United States Minor Outlying Islands</option>
    <option>Uruguay</option>
    <option>Uzbekistan</option>
    <option>Vanuatu</option>
    <option>Vatican City</option>
    <option>Venezuela</option>
    <option>Vietnam</option>
    <option>Virgin Islands, British</option>
    <option>Virgin Islands, U.S.</option>
    <option>Wallis and Futuna</option>
    <option>Western Sahara</option>
    <option>Yemen</option>
    <option>Zambia</option>
    <option>Zimbabwe</option>
</select>

如何加快选择框的性能？

【中文标题】如何加快选择框的性能？【英文标题】：How to speed up performance of Select Box? 【发布时间】：2018-01-31 12:50:08 【问题描述】：

我试图在ion-select 中显示一长串国家/地区。目前我正在尝试加载 249 个国家/地区。我的手机上的渲染性能非常慢。 

<ion-list margin-top margin-bottom>
    <ion-item>
      <ion-label margin-left style="color:#3498db">Country</ion-label>
      <ion-select margin-right [(ngModel)]="country" okText="Done" placeholder="Select">
        <ion-option *ngFor="let item of countries" [value]="item.ccode" [selected]="country == item.ccode">item.cname</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

有什么方法可以提高渲染性能？

【问题讨论】：

您从哪里获得249 记录？ @Sampath 来自我的服务器 如果以下解决方案有效，则没有问题。但您也可以寻求缓存解决方案。即您可以将这些国家/地区存储在您的设备上。 【参考方案1】：

最好的方法是使用Modal。您还可以在顶部添加一个搜索栏，以便用户可以轻松找到目标国家。以下只是一个简化的演示（如果您发现任何错误，请告诉我，因为我已经从中删除了很多不相关的代码）。

还请注意，我在视图中使用常规 div，而不是每个国家/地区使用 ion-list 和 ion-item。 这是因为国家/地区列表很友好大（〜250），并使用来自Ionic（基于Angular）的组件ion-list和ion-item将需要初始化这些组件，渲染它们，然后在每次过滤国家时创建/销毁它们. 在演示中，由于它们只是 html 元素（带有一些简单的样式规则），因此即使在非常旧的移动设备上性能也很好。

控制器

// Angular
import  Component  from '@angular/core';

// Ionic
import  NavParams, ViewController  from 'ionic-angular'; 

@Component( 
    selector: 'page-country-list', 
    templateUrl: 'country-list.html' 
    )
export class CountryListPage 

    public countries: Array<any>;
    public countriesToShow: Array<any>;

    constructor(private paramsCtrl: NavParams, private viewCtrl: ViewController) 
        // Get the data as a parameter
        this.countries = paramsCtrl.get('countries');

        // Initialize the list of countries to show in the view
        this.initializeCountriesToShow();
    

    public initializeCountriesToShow(): void 
        // Clone the list of countries so we don't modify the original copy
        this.countriesToShow = [...this.countries];
    

    public filterCountries(ev: any): void 
        // Reset countries back to all of the countries
        this.initializeCountriesToShow();

        // Set val to the value of the searchbar
        let val = ev.target.value;

        // If the value is an empty string don't filter the countries
        if (val && val.trim() != '') 
            this.countriesToShow = this.countriesToShow.filter((country) => 
                return (country.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
            )
        
    

    // Method that returns the selected country to the caller
    public selectCountry(country: any): void 
        this.viewCtrl.dismiss(country);
    

    // Method that closes the modal without returning anything
    public close(): void 
        this.viewCtrl.dismiss();

查看

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Countries</ion-title>
        <ion-buttons right>
            <button (click)="close()" ion-button icon-only>
                <ion-icon color="light" class="close-icon" name="close"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
    <ion-toolbar color="primary">
        <ion-searchbar placeholder="Type the name here..." (ionInput)="filterCountries($event)"></ion-searchbar>
    </ion-toolbar>
</ion-header>
<ion-content padding>
    <div class="country-list">
        <div tappable (click)="selectCountry(country)" class="country-item" *ngFor="let country of countriesToShow">
             country.name 
        </div>
    </div>
</ion-content>

样式

.ios, .md 
    page-country-list 

        div.country-item 
            position: relative;
            margin-right: 16px;
            margin-left: 16px;
            margin-top: 16px;
            padding-bottom: 16px;
            border-bottom: 0.55px solid map-get($colors, light);

            &:last-child 
                border-bottom: none;
            
        

        ion-navbar 
            .close-icon 
                font-size: 3.5rem;
                padding-right: 8px;

调用者组件

然后，为了显示模态，您可以执行以下操作：

constructor(private modalController: ModalController) 

// ...

public showCountryDropdown(): void 

    // Create the modal
    let modal = this.modalCtrl.create('CountryListPage');

    // Handle the result
    modal.onDidDismiss(country => 
        if (country) 
            // Handle the selected country
            // ...
        
    );

    // Show the modal
    modal.present();

注意：在演示中，我假设每个country 项目都有一个属性name。

【讨论】：

以上是关于HTML HTML国家/地区选择框（英文）的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 HTML 列表框和 SQL 代码显示表格中的某些列？

html [HTML]国家/地区选择

html HTML按大陆选择国家/地区

如果在 JavaScript w/HTML 中选择了某个国家/地区，如何要求邮政编码为数字

带有标志的 Html 国家/地区列表 [关闭]

Google Play 新增付款功能一览表