countrySelect.js 使用说明

一、介绍

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

1. html

1. [/code][size=5]2. CSS调用[/size]
3. [code]

复制代码

 3. JS调用

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

复制代码

 三、参数说明

参数值	默认值	具体说明
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, 是否显示分隔线 当设置了前置的国家/地区数据组后，前置的数据和其余数据下拉列表中是否使用分隔线间隔

四、效果预览

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！