更新时间：2022-03-20 00:09:02
更新说明：版本为1.0.5增加删除以及清空城市回调， 修复在取消选择内容的焦点后，选择内容已经隐藏了，但是点击原本位置的选项还是能点击到
更新时间：2017/9/25 上午11:37:24
更新说明：更新版本为1.0.3
解决网友“徨殇”提的增加县级数据,增加一个参数whole，显示市级还是市县级数据；但是要求的是开启这个，必须是引入数据源是citydata.js文件
更新时间：2017/8/31 下午4:04:01
更新说明：更新版本为1.0.2-修复“网友God2father”提的：点击清空操作后，不能再搜索的bug
更新时间：2017/8/21 上午10:17:57
更新说明：更新版本为1.0.1 修复搜索一次之后不能再搜索的bug，增加sass文件，方便修改样式
citySelect
citySelect是面向于PC端的一款基于JQuery的、整体功能都比较完善的拼音分类和集成搜索功能的城市选择插件。
Version1.0.2
Support
* Internet Explorer 8+
* Chrome for PC
* Safari for PC
* Firefox for PC
Integrations
* 支持拼音、名称模糊搜索功能
* 可以键盘操作选择
* 可以单选、多选模式切换
* 可以修改热门城市
Options
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| dataJson | [Array] | 默认空 | 城市数据源 |
| convert | [Boolean] | true(转换) | 转换数据，引入的数据源是citydata.js就需要转换；引入的是newcitydata.js就不需要 |
| shorthand | [Boolean] | false(全称) | 名称的全称、简称 |
| multiSelect | [Boolean] | false(单选) | 多选、单选 |
| search | [Boolean] | true(搜索) | 开启搜索 |
| multiMaximum | [Number] | 5(最多可选5个城市) | 最多可选的城市个数(多选) |
| multiType | [Number] | 0(多行) | 值允许1或者0；只用于多选，选中的值显示是一行还是多行 |
| placeholder | [String] | '请选择城市' | 默认的提示语 |
| searchPlaceholder | [String] | '输入关键词搜索' | 搜索文本框默认的提示语 |
| hotCity | [Array] | [](取前面18条数据) | 热门城市显示数据，传就生成热门城市，没有就插件生成 |
| onInit | [function] | function () {} | 插件初始化后的回调 |
| onForbid | [function] | function () {} | 插件禁止后再点击的回调 |
| onTabsAfter | [function] | function (target) {} | 点击tabs切换显示城市后的回调 |
| onTabsForbid | [function] | function (target) {} | tabs禁止后再点击的回调 |
| onCallerAfter | [function] | function (target, values) {} | 选择城市后的回调 |
使用方法
CSS
1 | <link rel="stylesheet" type="text/css" href="css/city-select.css"> |
Javascript
1 2 3 | <script type="text/javascript" src="js/citydata.js"></script><script type="text/javascript" src="js/citySelect-1.0.0.js"></script> |
Basic usage
class`city-select` 是必要的，不能把它去掉
单选
HTML
1 | <div class="city-select" id="single-select-1"></div> |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var singleSelect1 = $('#single-select-1').citySelect({ dataJson: cityData, //数据源 multiSelect: false, //单选 shorthand: true, //简称 search: true, //搜索 onInit: function() { //初始化回调 console.log(this) }, onTabsAfter: function(target) { //切换tab回调 console.log(target) }, onCallerAfter: function(target, values) { //选择后回调 console.log(JSON.stringify(values)) }}); |
单选设置默认城市
1 | singleSelect1.setCityVal('北京市'); |
多选
HTML
1 | <div class="city-select" id="multi-select-1"></div> |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var MulticitySelect1 = $('#multi-select-1').citySelect({ dataJson: cityData, //数据源 multiSelect: true, //多选 multiMaximum: 6, //可以选择的个数 search: false, //关闭搜索 onInit: function() { //初始化回调 console.log(this) }, onForbid: function() { //禁止后点击的回调 console.log(this) }, onTabsAfter: function(target) { //切换tab回调 console.log(event) }, onCallerAfter: function(target, values) { //选择后回调 console.log(JSON.stringify(values)) }}); |
多选设置城市接口
1 | MulticitySelect1.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市'); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery配置齐全的返回顶部插件goTop.js
- 下一个特效： jQuery仿京东移动端地址