jQuery city城市字母分类选择插件

所属分类:输入-选择框

 10190  86  查看评论 (59)
jQuery city城市字母分类选择插件 ie兼容8

更新时间: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('北京市, 天津市, 上海市, 广州市, 长沙市, 唐山市');
相关插件-选择框

仿当当移动端省市区三级联动

仿当当网手机端的省市区去三级联动选择插件
  选择框
 24660  280

jQuery下拉框多选

下拉字母多选框
  选择框
 25345  42

省市县三级联动加载地图

可以本地控制插件、地区三级级联查询、地区联动地图的插件,在线搜索
  选择框
 15223  129

jQuery房屋位置选择单选,整行选,全选

一个智能管理系统的楼层房屋选择
  选择框
 5808  19

讨论这个项目(59)回答他人问题或分享插件使用方法奖励jQ币

    jq22_harry 0
    2017/11/17 17:42:26
    输入搜索关键字后删除,会卡住很长时间
        lquan0
        2017/11/27 8:51:38

        这块我暂时不好优化

    回复
    shihundemogui 0
    2017/11/13 11:25:04

    楼主,我怎么才能修改成,不按照拼音筛选,(按照国内,港澳台,欧美,美洲。。。。)进行筛选啊

        lquan0
        2017/11/13 11:27:01

        啊?我这组件是没有国外城市数据的,就算你改了组件的搜索,你也搜索不出来吧

        shihundemogui0
        2017/11/13 11:34:36

        对啊,

        lquan0
        2017/11/13 11:35:14

        如果你要做这种筛选,你就要去改源码了

        shihundemogui0
        2017/11/13 11:36:28

        我想实现效果(让拼音的位置,显示国内,国外,等等,,,,),但是也没有数据,修改完就是现在的样子了

        shihundemogui0
        2017/11/13 11:38:10

        想要做成,携程的那个目的地城市多选的效果;http://vacations.ctrip.com/dingzhi/demand?from=index&type=C

        shihundemogui0
        2017/11/13 11:39:07

        您的源码,挺深奥的,要是修改可能会有很大的改动

        lquan0
        2017/11/13 11:45:20
        你这样子改啊,但是没有国外的数据,你是要显示空?这样子的话,我的照你的思路出一个版本?代码没有 那么深吧?
        shihundemogui0
        2017/11/14 16:44:06

        楼主,之前没有看到你说的;不好意思啊

        shihundemogui0
        2017/11/14 16:45:53

        没有国外的数据没有关系,显示为空就行(或者简单出几个假数据也行),能仿照我给你发的 携程的连接,出一个版本吗?

        shihundemogui0
        2017/11/14 17:29:47
        楼主看到我的回复可以加一下我的qq:1756593938,方便和您沟通!
        shihundemogui0
        2017/11/15 9:26:11

        楼主,在吗?

        lquan0
        2017/11/15 14:54:46

        不好意思啊,这个我没空做,最近都比较忙,没有时间去搞,这个我做我也要重新去开发了,还不如你自己搞一个呢。

        shihundemogui0
        2017/11/15 15:20:48

        好吧,但是我水平有限,搞不出来啊

        shihundemogui0
        2017/11/15 18:50:52
        楼主大神,能不能抽出点你的宝贵时间啊,给出一版吧,真的弄不出来了,工作进展不下去了,丢饭碗了,唉!
        shihundemogui0
        2017/11/17 10:36:14

        楼主,在吗?问你一个问题,我在进行城市搜索的时候,应该怎么做,和我写的json数据有关系吗?

        lquan0
        2017/11/17 11:20:14

        啊?这个我真帮不了你,实在没空

        lquan0
        2017/11/17 11:20:44

        搜索时按照json数据去搜索的,找到对应的关系

        shihundemogui0
        2017/11/18 8:54:57

        恩恩

        shihundemogui0
        2017/11/20 13:46:35

        楼主,你的插件,点击页面上的其他地方,就隐藏下拉的城市,是怎么做到的啊?

        shihundemogui0
        2017/11/20 14:16:40

        我看见你用的是$(document).on('click.cityselect', function (event)实现的,但是,我进行城市多选以后,去删除城市,没有执行document点击事件,是为什么?

    回复
    @苏 0
    2017/10/13 12:51:20
    启用多选并启用县级以后。能不能点击市,以后在选择下面的县级。 最终以区县作为最小选择单位。实际应用情况是选择了市,包含县区的。
        lquan0
        2017/10/13 14:01:25

        啊,不是很理解。我要全部返回区县给你?

        @苏0
        2017/10/16 17:35:41
        就是开启多选时候,按照区县选择,不能选择市。 
        lquan0
        2017/10/19 17:50:59

        啊?还有这操作?

    回复
    徨殇 0
    2017/9/22 17:37:59
    {
        "id": "420529",
        "name": "五峰土家族自治县",
        "parentId": "420500",
        "shortName": "五峰",
        "letter": "W",
        "cityCode": "0717",
        "pinyin": "Wufeng"
    }

    我看到县一级的数据了 为什么搜索的时候显示不出来?搜索的时候提示:没有找到五峰相关城市。望解决!非常感谢!

        lquan0
        2017/9/25 8:58:43

        这个本来定位是市级的,数据源是有县一级的数据的

    回复
    徨殇 0
    2017/9/22 17:32:43

    楼主 您好 希望添加县一级的数据 非常感谢!

        lquan0
        2017/9/26 10:40:45

        已更新版本,可以下载新版本

    回复
    ?? runin 0
    2017/9/2 16:49:10

    请问怎样拿到选择城市的所属省和下面以及的县,啥的

        lquan0
        2017/9/3 14:06:43

        这个有返回省份的id,没有返回省份的名称和县,如果需要的话,我下一个版本加一个

        ?? runin0
        2017/9/3 21:38:51

        我这边现在有这个需求,先根据市的名称查找,查到到市以后,把相应的省级数据也加载出来,等于是直接跳过了先选省,然后还要加载镇街出来,还是要感谢作者,哈哈,不过那个相应的省份的数据和下级的数据我已经有办法拿到了

        lquan1
        2017/9/4 9:09:34
        嗯,好的。数据源本来就可以自己去查找的,可以根据parentId  去查找就可以得到相应的数据的
    回复
    God2father 0
    2017/8/29 10:58:22

    楼主,单选的时候我先把热门城市删除,这时候就会报错

        lquan0
        2017/8/29 19:28:07

        不好意思啊,能说的明白点吗?把热门城市删除?

        God2father1
        2017/8/31 15:18:17

        打开页面的时候,输入框左侧默认显示的城市,点击x删除这时候就报错啦・・就是选择城市之后显示城市的位置

        God2father0
        2017/8/31 15:24:30

        或者点击清空按钮,输入框获得焦点就会报错,这时候自动检索功能也就不能用了

        lquan0
        2017/8/31 16:06:40

        谢谢,已定位bug,代码已提交审核

    回复
    for everything else 0
    2017/8/19 21:47:16

    楼主,有一个bug,搜索一次之后不能再搜索了。

    384行应该为:

    this.values.push({ 'name': [name], 'id': [id], 'parentId': [parentId] });

        lquan0
        2017/8/21 9:06:31

        好的,O(∩_∩)O谢谢,我查看下

        lquan0
        2017/8/21 10:21:34

        O(∩_∩)O谢谢,问题已找到,是我没考虑到单选的时候,ID的类型不是数组的,所以我没有进行判断处理,导致的问题,现在已经修复,提交代码审核了

    回复
    穿花衣的大蘑菇 0
    2017/8/15 15:43:29
    楼主,我怎么把数据设置成我自己需要的数据,而不是在js中写死的数据
        lquan0
        2017/8/15 19:25:21

        不好意思哦,我没有提供这样的一个接口

        穿花衣的大蘑菇0
        2017/8/15 20:33:29

        已经解决了,自己在js里在把后端传来的参数转成json格式赋给对应的变量就好了

        lquan0
        2017/8/16 9:00:07

        好的,这种也是一种方式

    回复
    穿花衣的大蘑菇 0
    2017/8/15 15:37:27

    ?主,我怎麽把?酵替?成我需要的,而不是JS中?死的??

    回复
取消回复