如何用JavaScript为HTML表单添加全球国家下拉选项

实现步骤 #

1. 准备国家列表数组：整理一个包含全球所有国家名称的数组，建议按字母排序提升用户选择体验。
2. 定位目标下拉框：通过元素id获取页面上的<select>控件。
3. 动态生成选项：遍历国家数组，为每个国家创建<option>节点，设置对应的value和显示文本，再添加到下拉框中。

完整代码示例 #

HTML部分（保留原有表单结构，仅调整下拉框初始内容）

<form action="action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <!-- 保留默认提示选项，也可留空让JS完全生成所有选项 -->
    <select id="country" name="country">
        <option value="">请选择国家</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
</form>

JavaScript部分

// 按字母排序的全球主要国家列表
const countries = [
    "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda",
    "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas",
    "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin",
    "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei",
    "Bulgaria", "Burkina Faso", "Burundi", "Cabo Verde", "Cambodia", "Cameroon",
    "Canada", "Central African Republic", "Chad", "Chile", "China", "Colombia",
    "Comoros", "Congo (Congo-Brazzaville)", "Costa Rica", "Croatia", "Cuba", "Cyprus",
    "Czechia (Czech Republic)", "Democratic Republic of the Congo", "Denmark", "Djibouti",
    "Dominica", "Dominican Republic", "East Timor (Timor-Leste)", "Ecuador", "Egypt",
    "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Eswatini", "Ethiopia",
    "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana",
    "Greece", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti",
    "Honduras", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland",
    "Israel", "Italy", "Ivory Coast", "Jamaica", "Japan", "Jordan", "Kazakhstan",
    "Kenya", "Kiribati", "Kosovo", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon",
    "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Madagascar",
    "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania",
    "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro",
    "Morocco", "Mozambique", "Myanmar (Burma)", "Namibia", "Nauru", "Nepal", "Netherlands",
    "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Korea", "North Macedonia",
    "Norway", "Oman", "Pakistan", "Palau", "Palestine", "Panama", "Papua New Guinea",
    "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania",
    "Russia", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent and the Grenadines",
    "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia",
    "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands",
    "Somalia", "South Africa", "South Korea", "South Sudan", "Spain", "Sri Lanka", "Sudan",
    "Suriname", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania",
    "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan",
    "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States",
    "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam", "Yemen",
    "Zambia", "Zimbabwe"
];

// 获取页面上的国家下拉框元素
const countrySelect = document.getElementById('country');

// 遍历数组，为每个国家生成下拉选项
countries.forEach(country => {
    // 创建<option>节点
    const option = document.createElement('option');
    // 设置选项的value值（和显示文本一致，也可改用ISO国家代码如"US"）
    option.value = country;
    // 设置选项显示的文本
    option.textContent = country;
    // 将选项添加到下拉框中
    countrySelect.appendChild(option);
});

代码说明 #

• 国家数组：已覆盖全球绝大多数国家，可根据需求补充或调整名称表述。
• 元素定位：document.getElementById('country')精准获取目标下拉框，确保JS能操作对应的控件。
• 选项生成：用forEach遍历数组，createElement创建新的选项节点，textContent设置显示文本，appendChild将选项添加到下拉框末尾。
• 自定义调整：如果需要用ISO国家代码作为value（比如提交表单时更规范），可以把数组改成键值对形式，再调整生成逻辑即可。

内容的提问来源于stack exchange，提问作者lillianfalky