一、介绍

该插件为国家/地区选择器，可以显示英文或中文，包含输入过滤等，纯JS，可以独立使用。
当前版本1.0，国家/地区数据源更新时间：2025.04.07

github地址：https://github.com/TammyViola/countrySelectJs

二、使用方式

1. html

<!-- 被绑定的控件 -->
<input type="text" id="countryInput" placeholder="选择国家/地区">

2. CSS调用

<link href="./dist/css/countrySelect.css" rel="stylesheet" type="text/css"/>

3. JS调用

// 使用示例
const countrySelector = new CountrySelector({
    inputId: 'countryInput',  // 绑定的input的id
    language: 'zh', // 或 'en'
    showFlag: true,  // 是否显示国旗图标
    preferredCountries: ['CN', 'US'], // 优先显示的国家/地区
    excludedCountries: ['TW'], // 排除中国台湾
    defaultValue: 'CN', // 设置默认值为中国
    enableSearch: true, // 启用搜索功能
    showDivider: true // 显示分隔线
});

三、参数说明

参数值	默认值	具体说明
inputId	‘ ‘	string类型，被绑定的控件input的id
language	‘en’	string类型，国家/地区文案显示的语言： ‘zh’ – 中文 ‘en’ – 英文
showFlag	true	Boolean, 国家/地区名前是否显示国旗，默认显示
preferredCountries	[ ]	Array数据组，国家/地区下拉列表中需要前置的国家/地区数据组，例如： [‘CN’, ‘US’]
excludedCountries	[ ]	Array数据组，国家/地区下拉列表中需要排除显示的国家/地区数据组，例如： [‘TW’, ‘HK’, ‘MO’]
defaultValue	‘ ‘	string类型，设置默认显示的国家/地区，例如： ‘CN’
enableSearch	true	Boolean, 是否启用搜索功能在input控件输入字符后，对国家/地区下拉列表进行过滤筛选
showDivider	true	Boolean, 是否显示分隔线当设置了前置的国家/地区数据组后，前置的数据和其余数据下拉列表中是否使用分隔线间隔