项目简介
本项目是一个基于Bootstrap和jQuery的省市区选择器插件,为网页开发者提供了简单易用的工具,用户能在界面上选择省市区,同时触发input的change事件。该插件参考了Tao Shi的city - picker项目并进行了优化改进。
项目的主要特性和功能
- 基于Bootstrap和jQuery构建,便于集成到现有Web项目。
- 提供友好的用户界面,用户可通过简单点击选择省市区。
- 能触发input的change事件,方便开发者后续处理。
- 具备丰富的API接口,可设置默认省市区、设置选中值、清空选择以及禁用选择器等。
安装使用步骤
安装依赖
确保项目中已包含Bootstrap和jQuery的库文件,将本项目的css和js文件引入项目。 ```html
```
HTML结构
创建一个input元素用于绑定省市区选择器。
html
<input class="form - control" id="city" placeholder="选择省市区">
初始化省市区选择器
使用jQuery的$.fn.dzCityPicker
方法初始化省市区选择器。
javascript
$("#city").dzCityPicker();
也可在初始化时设置默认值:
javascript
$('#city').dzCityPicker({defaultVal:'辽宁省 - 阜新市 - 海州区'});
API使用示例
调用dzCityPicker
方法并传入相应参数设置选中值、清空选择以及禁用选择器。示例如下:
javascript
// 设置选中值
$('#city').dzCityPicker('setVal','辽宁省 - 阜新市 - 海州区');
// 清空选择
$('#city').dzCityPicker('setVal','');
// 禁用选择器
$('#city').dzCityPicker('disabled',true);
// 启用选择器(默认即为启用状态)
$('#city').dzCityPicker('disabled',false);
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】