史丹利 發表於 2025-4-8 11:13:00

countrySelect.js 使用说明

<h1>一、介绍</h1>
<p>该插件为国家/地区选择器，可以显示英文或中文，包含输入过滤等，纯JS，可以独立使用。<br>当前版本1.3，国家/地区数据源更新时间：2025.04.07</p>
<p>github地址：https://github.com/TammyViola/countrySelectJs</p>
<h1>二、使用方式</h1>
<h2>1. html</h2>
<pre class="language-html highlighter-hljs"><code>&lt;!-- 被绑定的控件 --&gt;
&lt;input type="text" id="countryInput" placeholder="选择国家/地区"&gt;</code></pre>
<h2>2. CSS调用</h2>
<pre class="language-html highlighter-hljs"><code>&lt;link href="./dist/css/countrySelect.css" rel="stylesheet" type="text/css"/&gt;</code></pre>
<h2>&nbsp;3. JS调用</h2>
<pre class="language-javascript highlighter-hljs"><code>// 使用示例
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
});</code></pre>
<h1>&nbsp;三、参数说明</h1>
<table style="border-collapse: collapse; width: 100%; height: 435px" border="1">
<tbody>
<tr style="height: 21px">
<td style="width: 32.4582%; height: 21px">参数值</td>
<td style="width: 32.4582%; height: 21px">默认值</td>
<td style="width: 32.4601%; height: 21px">具体说明</td>
</tr>
<tr style="height: 21px">
<td style="width: 32.4582%; height: 21px">inputId</td>
<td style="width: 32.4582%; height: 21px">' '</td>
<td style="width: 32.4601%; height: 21px">string类型，被绑定的控件input的id</td>
</tr>
<tr style="height: 119px">
<td style="width: 32.4582%; height: 119px">language</td>
<td style="width: 32.4582%; height: 119px">'en'</td>
<td style="width: 32.4601%; height: 119px">
<p>string类型，国家/地区文案显示的语言：</p>
<p>'zh' -&nbsp;简体中文</p>
<p>'en' - 英文</p>
<p>&nbsp;</p>
<p>以下语言启用版本为：<span style="color: rgba(224, 62, 45, 1)">v1.3+</span></p>
<p>'tyft' - 中国通用繁体</p>
<p>'tw' -&nbsp;中国台湾繁体</p>
<p>'hk' - 中国香港繁体</p>
</td>
</tr>
<tr>
<td style="width: 32.4582%">placeholder</td>
<td style="width: 32.4582%">'Search countries/regions...'</td>
<td style="width: 32.4601%">
<p>string类型，被绑定输入框的placeholder属性值，默认值根据当前所选择的语言类型而显示不同，可以自定义</p>
<p>启用版本为：<span style="color: rgba(224, 62, 45, 1)">v1.3+</span></p>
</td>
</tr>
<tr style="height: 21px">
<td style="width: 32.4582%; height: 21px">showFlag</td>
<td style="width: 32.4582%; height: 21px">true</td>
<td style="width: 32.4601%; height: 21px">Boolean, 国家/地区名前是否显示国旗，默认显示</td>
</tr>
<tr style="height: 84px">
<td style="width: 32.4582%; height: 84px">preferredCountries</td>
<td style="width: 32.4582%; height: 84px">[ ]</td>
<td style="width: 32.4601%; height: 84px">
<p>Array数据组，国家/地区下拉列表中需要前置的国家/地区数据组，例如：</p>
<p>['CN', 'US']&nbsp;</p>
</td>
</tr>
<tr style="height: 84px">
<td style="width: 32.4582%; height: 84px">excludedCountries</td>
<td style="width: 32.4582%; height: 84px">[ ]</td>
<td style="width: 32.4601%; height: 84px">
<p>Array数据组，国家/地区下拉列表中需要排除显示的国家/地区数据组，例如：</p>
<p>['TW', 'HK', 'MO']&nbsp;</p>
</td>
</tr>
<tr style="height: 21px">
<td style="width: 32.4582%; height: 21px">defaultValue</td>
<td style="width: 32.4582%; height: 21px">' '</td>
<td style="width: 32.4601%; height: 21px">string类型，设置默认显示的国家/地区，例如： 'CN'</td>
</tr>
<tr style="height: 43px">
<td style="width: 32.4582%; height: 43px">enableSearch</td>
<td style="width: 32.4582%; height: 43px">true</td>
<td style="width: 32.4601%; height: 43px">
<p>&nbsp;Boolean, 是否启用搜索功能</p>
<p>在input控件输入字符后，对国家/地区下拉列表进行过滤筛选</p>
</td>
</tr>
<tr style="height: 21px">
<td style="width: 32.4582%; height: 21px">showDivider</td>
<td style="width: 32.4582%; height: 21px">true</td>
<td style="width: 32.4601%; height: 21px">
<p>Boolean, 是否显示分隔线</p>
<p>当设置了前置的国家/地区数据组后，前置的数据和其余数据下拉列表中是否使用分隔线间隔</p>
</td>
</tr>
<tr style="height: 21px">
<td style="width: 32.4582%; height: 21px">onChange</td>
<td style="width: 32.4582%; height: 21px">function(country){}</td>
<td style="width: 32.4601%; height: 21px">
<p>function，当前国家改变时触发执行自定义function，启用版本<span style="color: rgba(255, 0, 0, 1)"> v1.1+</span></p>
</td>
</tr>
</tbody>
</table>
<h1>四、效果预览</h1>
<p><img src="https://img2024.cnblogs.com/blog/982040/202504/982040-20250408111155327-509213331.png"></p><br><br>
来源：https://www.cnblogs.com/TammyBlog/p/18814258
頁: [1]
查看完整版本: countrySelect.js 使用说明