citypicker.js 是一个用于在网页上实现城市选择功能的 JavaScript 插件，它通常提供了简洁的界面和便捷的操作，方便用户快速选择所在城市。
# 一、
CityPicker.js 是一款专为前端开发者设计的轻量级城市选择组件，它提供了简洁易用的API和高度可定制的样式，帮助开发者在Web应用中快速集成城市选择功能，无论是用于表单中的地址输入，还是地理位置服务的选择，CityPicker.js都能提供流畅的用户体验。
# 二、核心特性
1. **轻量级**：CityPicker.js 文件体积小巧，加载速度快，对页面性能影响极小。
2. **易于集成**：通过简单的几行代码即可将组件集成到现有项目中。
3. **高度可定制**：支持自定义样式、布局和交互方式，满足不同场景需求。
4. **数据驱动**：支持从远程服务器加载城市数据，确保数据的实时性和准确性。
5. **响应式设计**：适配各种屏幕尺寸，包括手机、平板和桌面电脑。
# 三、安装与使用
## 安装
可以通过npm或直接引入CDN链接来安装CityPicker.js。
```bash
npm install city-picker
```
或者在HTML文件中直接引入：
```html
```
## 基本使用
在HTML中创建一个触发器元素（如按钮），并通过JavaScript初始化CityPicker.js：
```html
```
上述代码会在点击“选择城市”按钮时弹出城市选择界面，并在选择后将结果显示在`#city-result`元素内。
# 四、配置选项
CityPicker.js 提供了丰富的配置选项，以满足不同的业务需求：
| 选项名 | 类型 | 默认值 | 描述 |
|--------------|----------|-------|--------------------------------------------|
| `trigger` | String | '' | 触发器元素的选择器 |
| `output` | String | '' | 显示结果的元素选择器 |
| `data` | Array | [] | 本地城市数据数组 |
| `url` | String | '' | 远程城市数据的URL地址 |
| `template` | Function | null | 自定义模板函数 |
| `selected` | Object | null | 初始选中的城市对象 |
| `searchPlaceholder` | String | '搜索城市' | 搜索框占位符文本 |
| `width` | String | 'auto'| 组件宽度 |
| `height` | String | 'auto'| 组件高度 |
| `zIndex` | Number | 1000 | 组件层级 |
# 五、高级用法
## 1. 自定义模板
通过`template`配置项，可以自定义城市列表的显示模板：
```javascript
const cityPicker = new CityPicker({
trigger: '#city-picker-btn',
output: '#city-result',
template: function(item) {
return `
`;
}
});
```
## 2. 异步加载数据
当需要从远程服务器动态加载城市数据时，可以使用`url`配置项：
```javascript
const cityPicker = new CityPicker({
trigger: '#city-picker-btn',
output: '#city-result',
url: 'https://api.example.com/cities'
});
```
# 六、FAQs
**Q1: CityPicker.js是否支持多级联动选择？
A1: 是的，CityPicker.js支持多级联动选择，你可以通过配置`data`选项为嵌套结构来实现省份、城市、区县等多级联动效果，也可以结合`change`事件监听器，根据上一级的选择动态加载下一级的数据。
**Q2: 如何为CityPicker.js添加自定义样式？
A2: CityPicker.js允许通过CSS覆盖默认样式，你可以直接在页面的`