现在的位置: 首页 -> 前端学习 -> JS前端 -> js城市选择-实现地区下拉的拼音和声母检索插件

js城市选择-实现地区下拉的拼音和声母检索插件

2013-11-06 22:47 ⁄ 评论数 19 ⁄ 被浏览 24848 views+

客户的刁钻就是我们的进步！每每次次提出的一些苛刻需求，才能让我们不尽一切的去想办法解决，从而提升自我的能力！

以下就是实现js城市选择的效果，可以支持拼音和声母的检索。实现这个功能还是有难度的，但是用起来就很简单，我在一个网站上抠下后整理了一下，现在只用引入一个js就可以实现这个效果。

js地区插件

js城市、地区检索插件演示效果：

请选择地区：

源码很长，js的源码就不贴出来了，占地方。需要这个插件的话，可以右键插件源代码，然后查找"cityList.js"，即可定位到这个插件的js，再下载下来就行了。

HTML 部分代码：

插件下载：cityList.zip

您可能还会对这些文章感兴趣！

精华回复

[已解决]我想添加城市，问一下，要按照什么规则来添加？

目前有 19 条评论 @我要评论

19楼smile : 2014-08-12 15:18:24 评论说： @回复
您好，在手机端访问用汉字的形势搜索城市，单独输入一个汉字可以搜索出来对应城市，如果同时输入两个汉字，就显示没有相应城市！
18楼hgj123 : 2014-07-03 10:31:31 评论说： @回复
你好，看了你的博客觉得写的很好,请问能把这份源码给我学习下吗？549920744@qq.com 希望以后可以多多交流技术！~！~
17楼st : 2014-07-02 17:45:21 评论说： @回复
varAddressList =varAddressList +'xuanhuaqu|宣化|XH|1758|1@hengdianzhen|横店|XH|2593|1@'; 伟大的敬爱的楼主大人请问这数字代表什么啊那个1758 和1 急求！
16楼zinar : 2014-06-25 16:25:48 评论说： @回复
求一份，在线等，万分感谢
Dai 回复 zinar: js城市地区检索插件下载地址： http://www.daixiaorui.com/Public/uploads/201406/cityList.zip
2014-06-25 20:21:48 @回复
zinbar 回复 darex: 感谢，不过我是下午用chorme去下载到了
2014-06-25 22:43:07 @回复
15楼Bao : 2014-06-06 17:56:08 评论说： @回复
楼主能发一份吗，谢谢啦哈^_^
Dai 回复 Bao: 给你发了，其实文中有下载的方法，为什么你们都不自己下呢
2014-06-06 21:22:40 @回复
Bao 回复 darex: 好吧，刚看到，谢谢楼主哈，好心人哈
2014-06-11 12:29:59 @回复
Dai 回复 Bao: 不客气的
2014-06-11 22:59:00 @回复
14楼菜鸟 : 2014-06-04 23:07:21 评论说： @回复
lz发份儿参考参考，谢谢
Dai 回复菜鸟: 已发送
2014-06-05 12:44:33 @回复
13楼aimymiaomiao : 2014-05-13 11:15:09 评论说： @回复
可以给我一份吗？谢谢！嘻嘻
Dai 回复 aimymiaomiao: 发了。
2014-05-13 20:23:35 @回复
12楼kunlun122 : 2014-05-08 16:37:08 评论说： @回复
我想添加城市，问一下，要按照什么规则来添加？
Dai 回复 kunlun122: 比如我要添加北京，在 var varAddressList = ... 这个后面添加 “beijing|北京|bj|123456|1@”就可以了。第一个参数是地名的全拼，第二个是地名的中文表示，第三个是取得声母，第四个是地名id，如果不需要，可随便填..其实也可以简化成“beijing|北京|bj@”,后面两个参数可以省略的。
2014-05-08 17:43:22 @回复
11楼freestar : 2014-04-25 13:18:13 评论说： @回复
LZ发我一份，多谢了
Dai 回复 freestar: 发晚了，不好意思
2014-04-28 20:46:44 @回复
10楼开开 : 2014-04-15 23:37:14 评论说： @回复
楼主能把那个包发我邮件吗？谢谢
Dai 回复开开: 发到您邮箱了
2014-04-16 19:21:34 @回复
9楼Haoren : 2014-04-01 17:39:41 评论说： @回复
LZ 发一份学习学习 thanks
Dai 回复 Haoren: 发了哦
2014-04-01 22:15:51 @回复
8楼chenkun : 2014-03-17 11:41:02 评论说： @回复
LZ 能发一份cityList.js文件给我啵
Dai 回复 chenkun: 已发送了，谢谢支持！！
2014-03-17 20:29:33 @回复
7楼kim : 2014-03-16 23:08:53 评论说： @回复
楼主能发我一份么~谢谢
Dai 回复 kim: 已发送，感谢支持！！
2014-03-17 20:29:49 @回复
6楼java : 2014-03-03 14:18:21 评论说： @回复
楼主插件在哪里下载啊，能发我一份么
Dai 回复 java: 已发送了。
2014-03-03 15:09:13 @回复
java 回复 darex: 谢谢，好人一生平安！
2014-03-04 09:03:13 @回复
Dai 回复 java: 不客气的哦！
2014-03-04 21:22:59 @回复
5楼xuxu : 2014-03-01 14:22:33 评论说： @回复
我chrome浏览器设置的编码格式是utf－8的，把他设成其他的编码也不好使，但是用firefox和safari都可以
Dai 回复 xuxu: 发到你邮箱了，不清楚的地方再联系我。
2014-03-02 22:17:31 @回复
java 回复 xuxu: 你的JS还有么，可以发我一份么，谢谢
2014-03-03 14:53:46 @回复
4楼xuxu : 2014-03-01 14:07:10 评论说： @回复
楼主，我下来的autocomplete弹出框中中文是乱码，楼主可否发一个到我的邮件
3楼xuxu : 2014-03-01 14:06:12 评论说： @回复
楼主我cityList我下来之后，下面的弹出autocomplete是乱码
2楼555 : 2014-02-10 09:51:55 评论说： @回复
您好，怎么下载啊，没有看到下载地址
1楼cjl : 2014-01-14 17:11:34 评论说： @回复
楼主那个js包下载下来就乱码了，能把那个包发我邮件吗？谢谢
Dai 回复 cjl: 感谢支持，已经发送！
2014-01-16 13:05:36 @回复