更新时间：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
<link rel="stylesheet" type="text/css" href="css/city-select.css">
Javascript
<script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script> <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
<div class="city-select" id="single-select-1"></div>
Javascript
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))
}
});单选设置默认城市
singleSelect1.setCityVal('北京市');多选
HTML
<div class="city-select" id="multi-select-1"></div>
Javascript
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))
}
});多选设置城市接口
MulticitySelect1.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');
讨论这个项目（67）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
-
这个组件非常棒，但是存在几个问题：😘
1.选择清空时候没有回调
2.同时开启多行显示和搜索的时候，搜索框不能正常使用
3.在取消选择内容的焦点后，选择内容已经隐藏了，但是点击原本位置的选项还是能点击到（点击1次会点击到，点击第二次不会点击到）
暂时发现这三个问题，希望博主更新一下呀
-
更新了，新版本，问题2好像没发现有问题....
-
您好: 问一下, 删除多选的城市的事件, 我找不到 , 这边插件有回调函数吗
-
删除的好像没加回调
-
使用还是挺方便的，还不收费，想打赏都没找到地方。不用再自己去抓取数据了。部分BUG可以自己修改源码解决。
不过某些 区下的街道/城镇文件丢失了。作者在吗? 能不能将数据补全下，咱有偿交易下么。
-
哈哈哈，谢谢使用。应该会有bug的，能看懂自己修改也好的，哈哈哈。
这个街道的数据是我去这里找的https://github.com/mumuy/data_location，它这里应该也有缺失了，这个问题我已经知道存在了，现在在看有没有哪里能补全这个的，哈哈哈
-
啊，我说错了，这个组件的四级城市数据不是来自这里的，我看错了，那个缺失的城市数据，我在这个里面看下能不能补全吧，哈哈哈哈
楼主，我怎么才能修改成，不按照拼音筛选，（按照国内，港澳台，欧美，美洲。。。。）进行筛选啊
啊？我这组件是没有国外城市数据的，就算你改了组件的搜索，你也搜索不出来吧
对啊，
如果你要做这种筛选，你就要去改源码了
我想实现效果（让拼音的位置，显示国内，国外，等等，，，，），但是也没有数据，修改完就是现在的样子了
想要做成，携程的那个目的地城市多选的效果；http://vacations.ctrip.com/dingzhi/demand?from=index&type=C
您的源码，挺深奥的，要是修改可能会有很大的改动
-
你这样子改啊，但是没有国外的数据，你是要显示空？这样子的话，我的照你的思路出一个版本？代码没有 那么深吧？
楼主，之前没有看到你说的；不好意思啊
没有国外的数据没有关系，显示为空就行（或者简单出几个假数据也行），能仿照我给你发的 携程的连接，出一个版本吗？
-
楼主看到我的回复可以加一下我的qq：1756593938，方便和您沟通！
楼主，在吗？
不好意思啊，这个我没空做，最近都比较忙，没有时间去搞，这个我做我也要重新去开发了，还不如你自己搞一个呢。
好吧，但是我水平有限，搞不出来啊
-
楼主大神，能不能抽出点你的宝贵时间啊，给出一版吧，真的弄不出来了，工作进展不下去了，丢饭碗了，唉！
楼主，在吗？问你一个问题，我在进行城市搜索的时候，应该怎么做，和我写的json数据有关系吗？
啊？这个我真帮不了你，实在没空
搜索时按照json数据去搜索的，找到对应的关系
恩恩
楼主，你的插件，点击页面上的其他地方，就隐藏下拉的城市，是怎么做到的啊？
我看见你用的是$(document).on('click.cityselect', function (event)实现的，但是，我进行城市多选以后，去删除城市，没有执行document点击事件，是为什么？
-
启用多选并启用县级以后。能不能点击市，以后在选择下面的县级。 最终以区县作为最小选择单位。实际应用情况是选择了市，包含县区的。
啊，不是很理解。我要全部返回区县给你？
-
就是开启多选时候，按照区县选择，不能选择市。
啊？还有这操作？
{
"id": "420529",
"name": "五峰土家族自治县",
"parentId": "420500",
"shortName": "五峰",
"letter": "W",
"cityCode": "0717",
"pinyin": "Wufeng"
}我看到县一级的数据了 为什么搜索的时候显示不出来？搜索的时候提示：没有找到五峰相关城市。望解决！非常感谢！
这个本来定位是市级的，数据源是有县一级的数据的
请问怎样拿到选择城市的所属省和下面以及的县，啥的
这个有返回省份的id，没有返回省份的名称和县，如果需要的话，我下一个版本加一个
我这边现在有这个需求，先根据市的名称查找，查到到市以后，把相应的省级数据也加载出来，等于是直接跳过了先选省，然后还要加载镇街出来，还是要感谢作者，哈哈，不过那个相应的省份的数据和下级的数据我已经有办法拿到了
-
嗯，好的。数据源本来就可以自己去查找的，可以根据parentId 去查找就可以得到相应的数据的
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
