citySelect是面向于PC端的一款基于JQuery的、整体功能都比较完善的拼音分类和集成搜索功能的城市选择插件。
- 1.0.5
- Internet Explorer 8+
- Chrome for PC
- Safari for PC
- Firefox for PC
- 支持拼音、名称模糊搜索功能
- 可以键盘操作选择
- 可以单选、多选模式切换
- 可以修改热门城市
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| dataJson | [Array] | 默认空 | 城市数据源 |
| convert | [Boolean] | true(转换) | 转换数据，引入的数据源是citydata.js就需要转换；引入的是newcitydata.js就不需要 |
| whole | [Boolean] | false(市级) | 如果开启这个，需要引入的是citydata.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切换显示城市后的回调 |
| onDelVal | [function] | function (values) {} | 删除城市后的回调 |
| 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.3.js"></script>classcity-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('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');| 名称 | 描述 |
|---|---|
| setCityVal(val) | 设置城市默认 参数 * val: 传入的参数是用字符串的形式：'北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市' 栗子 singleSelect.setCityVal('北京市') 注意: 如果设置的城市超过multiMaximum设置的限制的个数，多出的是不会生效 |
| getCityVal() | 可以拿到选中的城市的值认 栗子 singleSelect.getCityVal() 注意: 只有在有选择城市的情况下，才能拿到城市的值或者是设置默认值后 |
| update(data) | 更新城市数据源 参数 * data: 传入的是数组 栗子 singleSelect.update([{ "id": "110100", "name": "北京市", "parentId": "110000", "shortName": "北京", "letter": "B", "cityCode": "010", "pinyin": "Beijing" }, { "id": "120100", "name": "天津市", "parentId": "120000", "shortName": "天津", "letter": "T", "cityCode": "022", "pinyin": "Tianjin" }]); |
| status(status) | 城市状态 参数 * status: 字符串-可以是readonly或disabled 栗子 singleSelect.status('disabled') |
| clear() | 清空所有选中的值 栗子 singleSelect.clear() |
| bindEvent() | 绑定事件 栗子 singleSelect.bindEvent() |
| unBindEvent() | 销毁事件 栗子 singleSelect.unBindEvent() |
| showDrop() | 显示事件 栗子 singleSelect.showDrop() |
| hideDrop() | 隐藏事件 栗子 singleSelect.hideDrop() |
https://lquan529.github.io/citySelect/
2022.03.17-更新版本为1.0.5
增加删除以及清空城市回调，
修复在取消选择内容的焦点后，选择内容已经隐藏了，但是点击原本位置的选项还是能点击到
2018.03.24-更新版本为1.0.4
增加返回显示和隐藏接口
2017.09.25-更新版本为1.0.3
增加一个参数whole，显示市级还是市县级数据；
但是要求的是开启这个，必须是引入数据源是citydata.js文件
2017.08.31-更新版本为1.0.2
修复点击清空操作后，不能再搜索的bug，
多选计数的样式优化
2017.08.21-更新版本为1.0.1
修复搜索一次之后不能再搜索的bug