一款JQuery带字母分类可搜索的城市选择器插件代码，有多种设定效果可以选择：单选、多选、固定值、禁止选择等等，演示页面里已经有了非常详细的参数说明和教程了，喜欢的童鞋请收下吧。
关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。
页面的head部分，引入一个CSS样式文件即可，代码如下：
<link type="text/css" rel="stylesheet" href="css/city-select.css">页面的body部分，包含了多个参数说明和范例介绍等，代码如下：
<h2>Options</h2>
<div class="info">
<table border="0" width="100%">
<tr>
<th>名称</th>
<th>类型</th>
<th>默认</th>
<th>描述</th>
</tr>
<tr>
<td>dataJson</td>
<td>[Array]</td>
<td>默认空</td>
<td>城市数据源</td>
</tr>
<tr>
<td>convert</td>
<td>[Boolean]</td>
<td>true(转换)</td>
<td>转换数据，引入的数据源是citydata.js就需要转换；引入的是newcitydata.js就不需要</td>
</tr>
<tr>
<td>shorthand</td>
<td>[Boolean]</td>
<td>false(全称)</td>
<td>名称的全称、简称</td>
</tr>
<tr>
<td>multiSelect</td>
<td>[Boolean]</td>
<td>false(单选)</td>
<td>多选、单选</td>
</tr>
<tr>
<td>search</td>
<td>[Boolean]</td>
<td>true(搜索)</td>
<td>开启搜索</td>
</tr>
<tr>
<td>multiMaximum</td>
<td>[Number]</td>
<td>5(最多可选5个城市)</td>
<td>最多可选的城市个数(多选)</td>
</tr>
<tr>
<td>multiType</td>
<td>[Number]</td>
<td>0(多行)</td>
<td>值允许1或者0；只用于多选，选中的值显示是一行还是多行</td>
</tr>
<tr>
<td>placeholder</td>
<td>[String]</td>
<td>'请选择城市'</td>
<td>默认的提示语</td>
</tr>
<tr>
<td>searchPlaceholder</td>
<td>[String]</td>
<td>'输入关键词搜索'</td>
<td>搜索文本框默认的提示语</td>
</tr>
<tr>
<td>hotCity</td>
<td>[Array]</td>
<td>[](取前面18条数据)</td>
<td>热门城市显示数据，传就生成热门城市，没有就插件生成</td>
</tr>
<tr>
<td>onInit</td>
<td>[function]</td>
<td>function () {}</td>
<td>插件初始化后的回调</td>
</tr>
<tr>
<td>onForbid</td>
<td>[function]</td>
<td>function () {}</td>
<td>插件禁止后再点击的回调</td>
</tr>
<tr>
<td>onTabsAfter</td>
<td>[function]</td>
<td>function (target) {}</td>
<td>点击tabs切换显示城市后的回调</td>
</tr>
<tr>
<td>onTabsForbid</td>
<td>[function]</td>
<td>function (target) {}</td>
<td>tabs禁止后再点击的回调</td>
</tr>
<tr>
<td>onCallerAfter</td>
<td>[function]</td>
<td>function (target, values) {}</td>
<td>选择城市后的回调</td>
</tr>
</table>
</div>
<h2>城市单选</h2>
<div class="city-select" id="single-select-1">
<div class="city-info">
<div class="city-name">
<span>北京市</span>
<span>北京市</span>
<span>北京市</span>
<span>北京市</span>
</div>
<div class="city-input">
<input type="text" class="input-search" value="" placeholder="请选择城市" />
</div>
</div>
<ul class="city-list hide">
<li class="caller active"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
<li class="caller"><span class="name">北京市</span><span class="spell">beijingshi</span></li>
</ul>
<div class="city-pavilion hide">
<div class="city-tabs">
<a href="javascript:;" class="active">热门城市</a>
<a href="javascript:;">AB</a>
<a href="javascript:;">CD</a>
<a href="javascript:;">EFG</a>
<a href="javascript:;">H</a>
<a href="javascript:;">J</a>
<a href="javascript:;">KL</a>
<a href="javascript:;" class="forbid">MNP</a>
<a href="javascript:;">QR</a>
<a href="javascript:;">S</a>
<a href="javascript:;">T</a>
<a href="javascript:;">W</a>
<a href="javascript:;">X</a>
<a href="javascript:;">Y</a>
<a href="javascript:;">Z</a>
</div>
<div class="city-cont">
<dl class="city-HOT">
<dd>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
<a href="javascript:;">北京市</a>
</dd>
</dl>
<p>*可以直接搜索查找城市（支持名称、拼音模糊搜索）<a href="javascript:;">清空</a><span>5</span></p>
<div class="city-tips">最多只能选择<span>5</span>项</div>
</div>
</div>
</div><!-- end .city-select -->
<div class="info">
<h3>单选</h3>
<p>multiSelect: false</p>
</div>
<div class="info">
<h3>简称</h3>
<p>shorthand: true</p>
</div>
<div class="info">
<h3>开启搜索功能</h3>
<p>search: true</p>
</div>
<div class="info">
<h3>设置城市默认</h3>
<p>singleSelect1.setCityVal('北京市');</p>
</div>
<h2>城市单选-只读</h2>
<div class="city-select" id="single-select-2"></div><!-- end .city-select -->
<div class="info">
<h3>设置城市默认</h3>
<p>singleSelect2.setCityVal('北京市');</p>
</div>
<div class="info">
<h3>只读</h3>
<p>singleSelect2.showStatus('readonly');</p>
</div>
<h2>城市单选-禁止</h2>
<div class="city-select" id="single-select-3"></div><!-- end .city-select -->
<div class="info">
<h3>设置城市默认</h3>
<p>singleSelect3.setCityVal('广州市');</p>
</div>
<div class="info">
<h3>禁止</h3>
<p>singleSelect3.showStatus('disabled');</p>
</div>
<h2>城市多选</h2>
<div class="city-select" id="multi-select-1"></div><!-- end .city-select -->
<div class="info">
<h3>开启多选功能</h3>
<p>multiSelect: true</p>
</div>
<div class="info">
<h3>设置最多可选择的个数</h3>
<p>multiMaximum: 6</p>
</div>
<div class="info">
<h3>关闭搜索功能</h3>
<p>search: false</p>
</div>
<div class="info">
<h3>设置城市默认</h3>
<p>MulticitySelect1.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');</p>
</div>
<h2>城市多选-自定义热门城市-搜索</h2>
<div class="city-select" id="multi-select-2"></div><!-- end .city-select -->
<div class="info">
<h3>开启多选功能</h3>
<p>multiSelect: true</p>
</div>
<div class="info">
<h3>自定义热门城市</h3>
<p>hotCity: ['北京市', '上海市', '广州市', '深圳市', '南京市', '杭州市', '天津市', '重庆市', '成都市', '青岛市', '苏州市', '无锡市', '常州市', '温州市', '武汉市', '长沙市', '石家庄市', '南昌市', '三亚市', '合肥市']</p>
</div>
<div class="info">
<h3>开启搜索功能</h3>
<p>search: true</p>
</div>
<h2>Methods</h2>
<div class="info">
<h3>设置城市默认</h3>
<p>setCityVal(val)</p>
<p>传入的参数是用字符串的形式：'北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市'</p>
<p class="careful">注意: 如果设置的城市超过multiMaximum设置的限制的个数，多出的是不会生效</p>
</div>
<div class="info">
<h3>获取城市的值</h3>
<p>getCityVal()</p>
<p>可以拿到选中的城市的值</p>
<p class="careful">注意: 只有在有选择城市的情况下，才能拿到城市的值或者是设置默认值后</p>
</div>
<div class="info">
<h3>更新城市数据</h3>
<p>update(data)</p>
<p>栗子：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"
}]);</p>
</div>
<div class="info">
<h3>城市状态</h3>
<p>status(status)</p>
<p>参数是readonly或disabled</p>
</div>
<div class="info">
<h3>清空所有选中的值</h3>
<p>clear()</p>
</div>
<div class="info">
<h3>绑定事件</h3>
<p>bindEvent()</p>
</div>
<div class="info">
<h3>销毁事件</h3>
<p>unBindEvent()</p>
</div>页面的底部，引入jQuery库和两个JS文件，请启用插件设置好相关参数，代码如下：
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/citydata.min.js"></script>
<script type="text/javascript" src="js/cityselect-1.0.0.min.js"></script>
<script type="text/javascript">
$(function() {
// 单选
var singleSelect1 = $('#single-select-1').citySelect({
dataJson: cityData,
multiSelect: false,
shorthand: true,
search: true,
onInit: function () {
console.log(this)
},
onTabsAfter: function (target) {
console.log(target)
},
onCallerAfter: function (target, values) {
console.log(JSON.stringify(values))
}
});
// 单选设置城市
singleSelect1.setCityVal('北京市');
// 单选
var singleSelect2 = $('#single-select-2').citySelect({
dataJson: cityData
});
// 单选设置城市
singleSelect2.setCityVal('北京市');
// 禁止点击显示的接口
singleSelect2.status('readonly');
//单选
var singleSelect3 = $('#single-select-3').citySelect({
dataJson: cityData
});
// 单选设置城市
singleSelect3.setCityVal('广州市');
// 禁止点击显示的接口
singleSelect3.status('disabled');
// 多选
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) {
console.log(event)
},
onCallerAfter: function (target, values) {
console.log(JSON.stringify(values))
}
});
// 多选设置城市接口
MulticitySelect1.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');
// 多选-自定义热门城市-搜索
var MulticitySelect2 = $('#multi-select-2').citySelect({
dataJson: cityData,
multiSelect: true,
search: true,
multiType: 1,
hotCity: ['北京市', '上海市', '广州市', '深圳市', '南京市', '杭州市', '天津市', '重庆市', '成都市', '青岛市', '苏州市', '无锡市', '常州市', '温州市', '武汉市', '长沙市', '石家庄市', '南昌市', '三亚市', '合肥市'],
onInit: function () {
console.log(this)
},
onForbid: function () {
console.log(this)
},
onTabsAfter: function (target) {
console.log(event)
},
onCallerAfter: function (target, values) {
console.log(JSON.stringify(values))
}
});
// 多选设置城市接口
MulticitySelect2.setCityVal('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');
});
</script>
系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ 1915635791