countrySelect.js 使用说明

史丹利

一、介绍

该插件为国家/地区选择器，可以显示英文或中文，包含输入过滤等，纯JS，可以独立使用。
当前版本1.3，国家/地区数据源更新时间：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', 'zh', 'tyft', 'tw', 'hk'
    placeholder: '',
    showFlag: true,  // 是否显示国旗图标
    preferredCountries: ['CN', 'US'], // 优先显示的国家/地区
    excludedCountries: ['TW'], // 排除中国台湾
    defaultValue: 'CN', // 设置默认值为中国
    enableSearch: true, // 启用搜索功能
    showDivider: true, // 显示分隔线
　　onChange: function(country){}   // 当前国家值改变的时候触发function
});

 三、参数说明

参数值	默认值	具体说明
inputId	' '	string类型，被绑定的控件input的id
language	'en'	string类型，国家/地区文案显示的语言： 'zh' - 简体中文 'en' - 英文   以下语言启用版本为：v1.3+ 'tyft' - 中国通用繁体 'tw' - 中国台湾繁体 'hk' - 中国香港繁体
placeholder	'Search countries/regions...'	string类型，被绑定输入框的placeholder属性值，默认值根据当前所选择的语言类型而显示不同，可以自定义 启用版本为：v1.3+
showFlag	true	Boolean, 国家/地区名前是否显示国旗，默认显示
preferredCountries	[ ]	Array数据组，国家/地区下拉列表中需要前置的国家/地区数据组，例如： ['CN', 'US']
excludedCountries	[ ]	Array数据组，国家/地区下拉列表中需要排除显示的国家/地区数据组，例如： ['TW', 'HK', 'MO']
defaultValue	' '	string类型，设置默认显示的国家/地区，例如： 'CN'
enableSearch	true	Boolean, 是否启用搜索功能 在input控件输入字符后，对国家/地区下拉列表进行过滤筛选
showDivider	true	Boolean, 是否显示分隔线 当设置了前置的国家/地区数据组后，前置的数据和其余数据下拉列表中是否使用分隔线间隔
onChange	function(country){}	function，当前国家改变时触发执行自定义function，启用版本 v1.1+

四、效果预览

来源：https://www.cnblogs.com/TammyBlog/p/18814258