jquery插件实现省市县三级联动功能效果-轻识

点击上方 java项目开发，选择设为星标

优质文章，及时送达

案例功能效果图

前端页面效果图

环境介绍

前端：vue+h5

完整源码获取方式

源码获取方式

扫码关注回复【ssx】获取完整源码

如果你在运行这个代码的过程中有遇到问题，请加小编微信xxf960513，我拉你进对应微信学习群！！帮助你快速掌握这个功能代码！

核心代码介绍

city-select.css

   q, blockquote {    quotes: none}
q:before, q:after, blockquote:before, blockquote:after {    content: "";    content: none}
a img {    border: none}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {    display: block}
.clearfix, .city-select .city-cont dl, .city-select .city-txt {    *zoom: 1}
.clearfix:after, .city-select .city-cont dl:after, .city-select .city-txt:after {    content: " ";    display: table;    height: 0;    clear: both}
.city-select {    font-size: 0;    position: relative;    display: inline-block}
.city-select .city-cont dl, .city-select .city-txt {    *zoom: 1}
.city-select .city-cont dl:after, .city-select .city-txt:after {    content: " ";    display: table;    height: 0;    clear: both}
.city-select.down .city-info {    border-bottom: none}
.city-select.down .city-info:after {    border-top: none;    border-bottom: 6px solid #ccc}
.city-select.multi .city-pavilion + .city-info .not-search {    display: none}
.city-select.multi .city-pavilion + .city-info .not-search[class~="not-val"] {    display: block}
.city-select.multi .city-pavilion.hide + .city-info .city-input {    display: none}
.city-select.multi .city-pavilion.hide + .city-info .city-input[class~="not-val"] {    display: block}
.city-select.multi .city-pavilion + .multi-type .city-input {    display: block}
.city-select.multi .city-pavilion.hide + .multi-type .city-input[class~="not-val"] {    display: block}
.city-select.multi .city-pavilion.hide + .multi-type .search-show {    display: block}
.city-select.disabled .city-info {    background-color: #eef1f6;    cursor: not-allowed}
.city-select.disabled .city-info span {    background-color: #eef1f6}
.city-select.disabled .city-info span:hover i {    display: none}
.city-select.disabled .city-info span + .city-input {    display: none}
.city-select.disabled .city-info input {    cursor: not-allowed}
.city-select.readonly .city-info {    cursor: default}
.city-select.readonly .city-info span:hover i {    display: none}
.city-select.readonly .city-info span + .city-input {    display: none}
.city-select.readonly .city-info input {    cursor: default}
.city-select .city-info {    border: 1px solid #ccc;    background-color: #fcfcfc;    cursor: pointer;    width: 280px;    overflow: hidden;    padding: 8px;    padding-top: 0;    position: relative;    z-index: 2}
.city-select .city-info:after {    content: '';    border-right: 6px solid transparent;    border-left: 6px solid transparent;    border-top: 6px solid #ccc;    border-radius: 2px;    display: block;    width: 0;    height: 0;    position: absolute;    top: 17px;    right: 5px;    -moz-transition: border .2s;    -o-transition: border .2s;    -webkit-transition: border .2s;    transition: border .2s}
.city-select .city-info.multi-type span {    background: none;    padding: 5px 0;    margin-right: 0}
.city-select .city-info.multi-type .span-over {    width: 99%;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap}
.city-select .city-info.multi-type .city-input {    display: block;    width: 100%}
.city-select .city-info.multi-type .city-input.hide {    display: none}
.city-select .city-info span {    background-color: #f5f5f5;    border-radius: 2px;    color: #666;    cursor: default;    font-size: 14px;    display: inline-block;    vertical-align: middle;    padding: 5px;    margin-right: 5px;    position: relative}
.city-select .city-info span + .city-input {    width: auto}
.city-select .city-info span i {    color: #fff;    cursor: pointer;    background: #ffbfbf;    border-radius: 100%;    display: block;    width: 14px;    height: 14px;    line-height: 14px;    text-align: center;    font-size: 0;    position: absolute;    top: -5px;    right: -5px;    z-index: 1;    visibility: hidden;    opacity: 0;    -moz-transition: all 1s;    -o-transition: all 1s;    -webkit-transition: all 1s;    transition: all 1s}
.city-select .city-info span i:after {    content: '\D7';    font-size: 12px}
.city-select .city-info span:hover i {    visibility: visible;    opacity: 1}
.city-select .city-info .city-input, .city-select .city-info span {    display: inline-block;    vertical-align: middle;    margin-top: 8px}
.city-select .city-input {    width: 100%;    position: relative;    overflow: hidden}
.city-select .city-input.hide {    display: none}
.city-select .city-input em {    color: #999;    display: block;    font-style: normal;    font-size: 12px;    height: 24px;    line-height: 24px}
.city-select input[type="text"] {    background: transparent;    border: none;    box-sizing: border-box;    color: #333;    font-size: 12px;    width: 100%;    height: 24px;    line-height: 24px \9;    padding: 0 5px;    outline: none}
.city-select .city-pavilion, .city-select .city-list {    border: 1px solid #ccc;    background: #fff;    position: absolute;    top: 100%;    z-index: 999;    left: 0;    margin-top: -1px;    transition-duration: 400ms;    transform: translateY(0);    opacity: 1;    visibility: visible}
.city-select .city-pavilion.hide, .city-select .city-list.hide {    transform: translateY(-2%);    opacity: 0;    visibility: hidden}
.city-select .city-pavilion {    box-shadow: 0 2px 5px #ddd;    width: 467px}
.city-select .city-tabs {    border-bottom: 1px solid #ccc;    background: #fbfbfb;    font-size: 0}
.city-select .city-tabs a {    border-bottom: 1px solid transparent;    display: inline-block;    font-size: 14px;    color: #666;    padding: 0 6px;    height: 36px;    line-height: 36px;    text-align: center;    position: relative;    bottom: -1px;    -moz-transition: all 1s;    -o-transition: all 1s;    -webkit-transition: all 1s;    transition: all 1s}
.city-select .city-tabs a:hover {    border-bottom-color: #000}
.city-select .city-tabs a.active {    border-bottom-color: #02aec7;    color: #02aec7;    cursor: default}
.city-select .city-tabs a.forbid {    color: #bbb;    cursor: not-allowed}
.city-select .city-tabs a.forbid:hover {    border-bottom-color: transparent}
.city-select .city-cont {    padding-top: 20px;    padding-left: 20px;    font-size: 0;    position: relative;    max-height: 200px;    overflow-x: hidden;    overflow-y: auto}
.city-select .city-cont dl:first-child dd {    margin-left: 0}
.city-select .city-cont dt, .city-select .city-cont dd {    display: inline-block;    vertical-align: top;    float: left}
.city-select .city-cont dt {    color: #02aec7;    font-size: 16px;    width: 28px}
.city-select .city-cont dd {    font-size: 14px;    width: 421px;    margin-top: -10px;    margin-left: -10px;    padding-bottom: 20px}
.city-select .city-cont dd a {    color: #666;    display: inline-block;    padding: 5px 7px;    margin-top: 5px;    margin-left: 5px;    -moz-transition: all .5s;    -o-transition: all .5s;    -webkit-transition: all .5s;    transition: all .5s}
.city-select .city-cont dd a:hover {    background: #f5f5f5;    border-radius: 2px}
.city-select .city-cont dd a.active {    background: #02aec7;    border-radius: 2px;    color: #fff;    box-shadow: 0 0 5px #ddd}
.city-select .city-cont dl {    transition-duration: 400ms;    opacity: 1;    transform: translateX(0)}
.city-select .city-cont dl.hide {    display: none;    opacity: 0;    transform: translateX(5%)}
.city-select .city-list {    font-size: 0;    width: 298px;    max-height: 170px;    overflow-x: hidden;    overflow-y: auto;    box-sizing: border-box}
.city-select .city-list li {    border-top: 1px solid #ccc;    border-bottom: 1px solid #ccc;    cursor: pointer;    padding: 10px 5px;    position: relative;    margin-bottom: -1px}
.city-select .city-list li:first-child {    border-top: none}
.city-select .city-list li:hover {    background-color: #f9f9f9}
.city-select .city-list li.active {    border-left: 2px solid #02aec7;    background-color: #f0fbfd}
.city-select .city-list li.hover {    border-bottom-color: #02aec7;    background-color: #f9f9f9;    z-index: 2}
.city-select .city-list li.hover span {    text-indent: 10px}
.city-select .city-list li.not-have {    background-color: #fff;    color: #999;    font-size: 14px;    cursor: not-allowed;    line-height: 1.5;    padding: 5px}
.city-select .city-list li.not-have strong {    color: #02aec7;    font-style: normal;    padding: 0 5px}
.city-select .city-list span {    display: inline-block;    font-size: 14px;    width: 50%;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    -moz-transition: all .5s;    -o-transition: all .5s;    -webkit-transition: all .5s;    transition: all .5s}
.city-select .city-list span.spell {    text-align: right;    font-size: 12px;    color: #02aec7}
.city-select .city-txt {    color: #999;    font-size: 12px;    margin-bottom: 10px;    vertical-align: text-bottom;    padding-top: 10px;    padding-left: 20px}
.city-select .city-txt a, .city-select .city-txt span {    display: block;    float: right;    margin-right: 10px;    vertical-align: top}
.city-select .city-txt em {    font-style: normal}
.city-select .city-txt a {    color: #dc8383;    margin-top: -3px}
.city-select .city-txt a:hover {    color: #02aec7}
.city-select .city-txt a i {    background: url(http://images.vrm.cn/2017/07/26/del.png) no-repeat;    width: 16px;    height: 16px;    display: inline-block;    vertical-align: middle}
.city-select .city-txt span {    letter-spacing: 2px}
.city-select .city-txt i {    color: #02aec7}
.city-select .city-tips {    background: rgba(0, 0, 0, 0.7);    border-radius: 2px;    color: #fff;    font-size: 14px;    text-align: center;    padding: 0 10px;    position: absolute;    top: 5px;    left: 50%;    line-height: 36px;    margin-left: -50px;    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B200000, endColorstr=#B200000);    transition-duration: 400ms;    transform: translateY(0);    opacity: 1;    visibility: visible;    z-index: 5}
.city-select .city-tips.hide {    transform: translateY(5%);    opacity: 0;    visibility: hidden}

Cityselect.js

(function ($, window) {    var functionality = {};
    /**     * 构造器     */    function Cityselect(options, selector) {        this.options = $.extend({}, Cityselect.defaults, options);        this.$selector = $(selector);        this.multiSelectResult = [];        this.multiSelectResultId = [];        this.provinceId = [];        this.whole = [];        this.values = [];        this.selectIndex = 0;        this.isfocus = true;
        this.init();    }
    /**     * 默认参数     */    Cityselect.defaults = {        dataJson: null,        convert: true,        whole: false,        shorthand: false,        search: true,        multiSelect: false,        multiMaximum: 5,        multiType: 0,        mosaic: ',',        placeholder: '请选择城市',        searchPlaceholder: '输入关键词搜索',        hotCity: [],        onInit: function () {},        onForbid: function () {},        onTabsAfter: function (target) {},        onTabsForbid: function (target) {},        onCallerAfter: function (target, values) {}    };
    /**     * 内部函数     */    functionality.recombine = function (data) {        var resultId = [],            result = [],            province = [];
        // 筛选出省份的ID        $.each(data, function (key, value) {            if (value.parentId === '100000') {                resultId.push(value.id);                province.push(value);            }        });
        // 根据省份ID，查找出所有的城市        for (var i = 0; i < resultId.length; i++) {            $.each(data, function (key, value) {                if (resultId[i] === value.parentId) {                    result.push(value);                }            });        }
        // 存储省份        this.province = province;
        // 筛选出除了省份外的数据        functionality.whole.call(this);
        return result;    }
    functionality.whole = function () {        var self = this,            result = [];
        $.each(self.options.dataJson, function (key, value) {            if (value.id !== '100000' && value.parentId !== '100000') {                result.push(value);            }        });
        self.whole = result;    }
    functionality.filter = function (parameter) {        var configure = parameter;
        // 包含市县级数据，否则市级数据        configure.contain = configure.options.whole ? configure.whole : configure.newCityData;
        //分类的城市        parameter.filterCity = {            HOT: [],            A: [],            B: [],            C: [],            D: [],            E: [],            F: [],            G: [],            H: [],            I: [],            J: [],            K: [],            L: [],            M: [],            N: [],            O: [],            P: [],            Q: [],            R: [],            S: [],            T: [],            U: [],            V: [],            W: [],            X: [],            Y: [],            Z: []        };
        $.each(configure.contain, function (key, value) {            //匹配城市数据            switch (value.letter) {                case ('A'):                        parameter.filterCity.A.push(value);                    break;                case ('B'):                        parameter.filterCity.B.push(value);                    break;                case ('C'):                        parameter.filterCity.C.push(value);                    break;                case ('D'):                        parameter.filterCity.D.push(value);                    break;                case ('E'):                        parameter.filterCity.E.push(value);                    break;                case ('F'):                        parameter.filterCity.F.push(value);                    break;                case ('G'):                        parameter.filterCity.G.push(value);                    break;                case ('H'):                        parameter.filterCity.H.push(value);                    break;                case ('I'):                        parameter.filterCity.I.push(value);                    break;                case ('J'):                        parameter.filterCity.J.push(value);                    break;                case ('K'):                        parameter.filterCity.K.push(value);                    break;                case ('L'):                        parameter.filterCity.L.push(value);                    break;                case ('M'):                        parameter.filterCity.M.push(value);                    break;                case ('N'):                        parameter.filterCity.N.push(value);                    break;                case ('O'):                        parameter.filterCity.O.push(value);                    break;                case ('P'):                        parameter.filterCity.P.push(value);                    break;                case ('Q'):                        parameter.filterCity.Q.push(value);                    break;                case ('R'):                        parameter.filterCity.R.push(value);                    break;                case ('S'):                        parameter.filterCity.S.push(value);                    break;                case ('T'):                        parameter.filterCity.T.push(value);                    break;                case ('U'):                        parameter.filterCity.U.push(value);                    break;                case ('V'):                        parameter.filterCity.V.push(value);                    break;                case ('W'):                        parameter.filterCity.W.push(value);                    break;                case ('X'):                        parameter.filterCity.X.push(value);                    break;                case ('Y'):                        parameter.filterCity.Y.push(value);                    break;                case ('Z'):                        parameter.filterCity.Z.push(value);                    break;                default:            }
            //如果有设置热门城市，就输出设置的，反正就去取默认城市前面18条做热门城市            if (parameter.options.hotCity.length < 1 && key < 18) {                parameter.filterCity.HOT.push(value);            } else {                $.each(parameter.options.hotCity, function (hkey, hvaluef) {                    if (hvaluef === value.name) {                        parameter.filterCity.HOT.push(value);                    }                });            }        });
        return parameter.filterCity;    }
    functionality.montage = function (citydata, letter) {        var self = this,            data = citydata === 0 ? self.filterCity : citydata,            html = '',            name;
        $.each(data, function (key, value) {
            name = self.options.shorthand ? value.shortName : value.name; //显示的是简称还是全称
            if (citydata < 1) {
                if (letter === key) {
                    $.each(value, function (lkey, lvalue) {                        name = self.options.shorthand ? lvalue.shortName : lvalue.name; //显示的是简称还是全称
                        html += ''" data-id="' + lvalue.id + '" data-title="' + name + '" data-letter="' + lvalue.letter + '">' + name + '';
                    });
                }
            } else {
                html += ''" data-id="' + value.id + '" data-title="' + name + '" data-letter="' + value.letter + '">' +                        '' + name + '' +                        '' + value.pinyin + '' +                     '
';            }
        });
        return html;    }
    functionality.template = [        '',            '',                '热门城市',                'AB',                'CD',                'EFG',                'HI',                'JK',                'LM',                'NOP',                'QR',                'S',                'TU',                'VWX',                'Y',                'Z',            '
',            '',                '{cont}',            '
',            '',            '清空0/{maxnum}',            '*可以直接搜索查找城市（支持名称、拼音模糊搜索）',            '
',        '
',        '',            '{name}',            '',                '',            '
',        '
',        '
',        '最多只能选择{tipnum}项
'    ];
    functionality.split = function (str) {        var letArray = [];
        for ( var i = 0; i < str.length; i++ ) {            letArray.push(str[i]);        }
        return letArray;    }        functionality.groupArray = [        'HOT',        'AB',        'CD',        'EFG',        'HI',        'JK',        'LM',        'NOP',        'QR',        'S',        'TU',        'VWX',        'Y',        'Z'    ];
    functionality.showDrop = function (event) {        var self = this,            configure = self.options,            $target = $(event.target);
        //禁止点击后的回调        if ($(event.currentTarget).hasClass('forbid')) {            configure.onForbid.call(self);            return false;        }
        //点击删除        if ($target.hasClass('del')) {            functionality.deletes.call(self, $target);            return false;        }
        self.isfocus = true;            self.$selector.addClass('down').find('.city-pavilion').removeClass('hide').siblings('.city-list').addClass('hide');
        $(event.currentTarget).find('.input-search').focus();
        //有值就加选中状态        functionality.defSelected.call(self);    }
    functionality.tabs = function (event) {        var $target = $(event.target),            configure = this.options,            letter = $target.data('letter');                //tabs禁止点击后的回调        if ($target.hasClass('forbid')) {            configure.onTabsForbid.call(self, $target);            return false;        }
        //添加选中状态        $target.addClass('active').siblings().removeClass('active');
        //显示对应索引的城市列表        this.$selector.find('dl').addClass('hide').siblings('.city-'+ letter).removeClass('hide');
        //切换列表回调        configure.onTabsAfter.call(this, $target);    }
    functionality.singleAchieve = function (event) {        var $target = $(event.currentTarget),            $input = this.$selector.find('.input-search'),            $cityInfo = this.$selector.find('.city-info'),            configure = this.options,            parentId = $target.attr('data-parentid'),            id = $target.attr('data-id'),            name = $target.data('title');
        //存储选中的值        this.values = [];        this.values.push({ 'name': name, 'id': id, 'parentId': parentId });
        //添加选中状态        this.$selector.find('.caller').removeClass('active');        this.$selector.find('.caller[data-id="'+ id +'"]').addClass('active');
        //赋值选中的给文本框        $cityInfo.find('span').remove();        this.$selector.find('.city-input').before(''" data-parentid="'+ parentId +'">'+ name +'').find('.input-search').val('');
        //调整文本框位置        functionality.singleResize.call(this);
        //隐藏弹窗        this.$selector.removeClass('down').find('.city-pavilion, .city-list').addClass('hide');
        //没有开启搜索且数组是不为空        if (!this.options.search && this.values.length > 0) {            this.$selector.find('.city-input').addClass('hide');        }
        //选择之后的回调        configure.onCallerAfter.call(this, $target, this.values[0]);    }
    functionality.multiAchieve = function (event) {        var self = this,            $selector = self.$selector,            $target = $(event.currentTarget),            $input = $selector.find('.input-search'),            configure = self.options,            parentId = $target.attr('data-parentid'),            id = $target.attr('data-id'),            name = $target.data('title'),            inputVal = $input.val(),            hasActive = $target.hasClass('active'),            joinSpan, mosaicName;
        if (!hasActive) {            //选中的是否大于限制的            if (self.selectIndex >= configure.multiMaximum) {                $selector.find('.city-tips').removeClass('hide');
                setTimeout(function() {                    $selector.find('.city-tips').addClass('hide');                }, 1000);
                return false;            }
            //选择的城市            if ($.inArray(name, self.multiSelectResult) < 0) {                self.multiSelectResult.push(name);                self.multiSelectResultId.push(id);                self.provinceId.push(parentId);
                //拼接生成选中值                joinSpan = ''" data-parentid="'+ parentId +'">'+ name +'';
                //添加选中状态                $selector.find('.caller[data-id="'+ id +'"]').addClass('active');
                //添加选中的城市显示方式                if (configure.multiType < 1) {                    $selector.find('.city-input').before(joinSpan);                }
                //选中数                self.selectIndex += 1;            }
        } else {            //删除去掉选中城市            self.multiSelectResult.splice($.inArray(name, self.multiSelectResult), 1);            self.multiSelectResultId.splice($.inArray(id, self.multiSelectResultId), 1);            self.provinceId.splice($.inArray(parentId, self.provinceId), 1);
            //去掉选中状态            $selector.find('.caller[data-id="'+ id +'"]').removeClass('active');
            //删除选中的城市            $selector.find('.city-info').find('span[data-id="'+ id +'"]').remove();
            //选中数            self.selectIndex -= 1;        }
        //存储选中的值        self.values = [];        self.multiSelectResult.length > 0 ? self.values.push({ 'name': self.multiSelectResult, 'id': self.multiSelectResultId, 'parentId': self.provinceId }) : '';
        //拼接后的选中name        mosaicName = self.multiSelectResult.join(configure.mosaic);
        //添加选中的城市显示方式        if (configure.multiType === 1) {            $selector.find('.city-name').html(''">'+ mosaicName +'');        }
        //有选中就清除，没有值就添加        if (self.selectIndex < 1) {            $selector.find('.city-input').addClass('not-val');            $selector.find('.span-over').remove();        } else {            $selector.find('.city-input').removeClass('not-val');        }
        //添加选中数        $selector.find('.city-count').find('i').text(self.selectIndex);
        //选择之后的回调        configure.onCallerAfter.call(self, $target, self.values[0]);    }
    functionality.search = function (event) {        var self = this,            $target = $(event.target),            configure = this.options,            keyCode = event.keyCode,            inputVal = $target.val(),            result = [],            resultHtml;
        //如果是按下shift/ctr/左右/command键不做事情        if (keyCode === 16 || keyCode === 17 || keyCode === 18 || keyCode === 37 || keyCode === 39 || keyCode === 91 || keyCode === 93) {            return false;        }
        //如果不是按下enter/上下键的就做搜索事情        if (keyCode !== 13 && keyCode !== 38 && keyCode !== 40) {
            self.isfocus = false;                $.each(self.contain, function(key, value) {                //拼音或者名称搜索                if(value.pinyin.toLocaleLowerCase().search(inputVal.toLocaleLowerCase()) > -1 || value.name.search(inputVal) > -1 || value.id.search(inputVal) > -1 ){                    result.push(value);                }            });
            resultHtml = result.length > 0 ? functionality.montage.call(self, result) : '没有找到'+ inputVal +'相关城市
';
            self.$selector.find('.city-list').html(resultHtml);
            //有值就加选中状态            functionality.defSelected.call(self);
            //弹窗隐藏，搜索列表显示            functionality.searchShow.call(self);        }
        return false;    }
    functionality.searchShow = function (event) {        this.$selector.addClass('down').find('.city-pavilion').addClass('hide');        this.$selector.find('.city-input').addClass('search-show');        this.$selector.find('.city-list').removeClass('hide');    }
    functionality.defSelected = function (event) {        var self = this;
        //有选中的，就添加选中状态        if (self.values.length > 0) {            if (self.values[0].id instanceof Array) {                $.each(self.values[0].id, function (key, value) {                    self.$selector.find('.caller[data-id="'+ value +'"]').addClass('active');                });            } else {                self.$selector.find('.caller[data-id="'+ self.values[0].id +'"]').addClass('active');            }        }    }
    functionality.operation = function (event) {        var self = this,            $selector = self.$selector,            $cityList = $selector.find('.city-list'),            $target = $(event.target),            $items = $cityList.find('.caller'),            hasNothave = $cityList.find('li').hasClass('not-have'),            keyCode = event.keyCode,            index = 0,            direction,            itemIndex;
        //按下enter键，执行选中事件        if (keyCode === 13) {
            $cityList.find('.caller.hover').trigger('click');
            return false;        }                //按下上下键        if (keyCode === 38 || keyCode === 40) {                        //方向            direction = keyCode === 38 ? -1 : 1;
            //选中的索引            itemIndex = $items.index($cityList.find('.caller.hover'));
            if (itemIndex < 0) {                index = direction > 0 ? -1 : 0;            } else {                index = itemIndex;            }
            //键盘去选择的索引            index = index + direction;
            //循环选择            index = index === $items.length ? 0 : index;
            //添加选中状态            $items.removeClass('hover').eq(index).addClass('hover');
            if (!hasNothave) {                //滚动条跟随定位                functionality.scroll.call(self);            }
            return false;
        }
    }
    functionality.scroll = function (event) {        var self = this,            $cityList = self.$selector.find('.city-list'),            $callerHover = $cityList.find('.caller.hover'),            oh = $cityList.outerHeight(),            ch = $callerHover.outerHeight() + 1,            dy = $callerHover.position().top,            sy = $cityList.scrollTop();
        $cityList.animate({            scrollTop: dy + ch - oh + sy        }, 200);    }
    functionality.singleResize = function () {        var self = this,            $selector = self.$selector,            $cityInfo = $selector.find('.city-info'),            _iw = $cityInfo.outerWidth(),            _p = $cityInfo.innerWidth() - $cityInfo.width(),            _sw = $cityInfo.find('span').outerWidth(true);
        $selector.find('.city-input').width(_iw - _sw - _p - 2);    }
    functionality.multiResize = function () {        var self = this,            $selector = self.$selector,            _h = $selector.outerHeight(true) - 1;
        $selector.find('.city-pavilion, .city-list').animate({            'top': _h        }, 10);    }
    functionality.forbid = function () {        var self = this;
        $.each(self.$selector.find('.city-cont').find('dl'), function (key, value) {            var _this = $(value),                _letter = _this.data('letter');
            if (!$(value).text()) {                self.$selector.find('.tab-a[data-letter="'+ _letter +'"]').addClass('forbid');            }        });
    }
    functionality.deletes = function (target) {        var self = this,            $target = target,            $parent = $target.parent(),            name = $parent[0].innerText,            id = $parent.attr('data-id'),            parentId = $parent.data('parentid');
        //删除去掉选中城市        self.multiSelectResult.splice($.inArray(name, self.multiSelectResult), 1);        self.multiSelectResultId.splice($.inArray(id, self.multiSelectResultId), 1);        self.provinceId.splice($.inArray(parentId, self.provinceId), 1);
        //存储剩下城市的值        self.values = [];        self.multiSelectResult.length > 0 ? self.values.push({ 'name': self.multiSelectResult, 'id': self.multiSelectResultId, 'parentId': self.provinceId }) : '';
        //删除        $parent.remove();        self.$selector.find('.caller[data-id="'+ id +'"]').removeClass('active');
        //如果是多选才执行以下事情        if (self.options.multiSelect) {            self.selectIndex -= 1;            self.$selector.find('.city-count').find('i').text(self.selectIndex);
            //数组是空            self.values.length < 1 ? self.$selector.find('.city-input').addClass('not-val') : '';        } else {            //调整文本框位置            functionality.singleResize.call(self);
        }    }
    /**     * 原型方法     */    Cityselect.prototype.init = function () {        var self = this,            configure = this.options;
        //开启转换就用新的json，否则就用正常格式        self.newCityData = configure.convert ? functionality.recombine.call(self, configure.dataJson) : configure.dataJson;
        //城市分类生成json        functionality.filter(self);
        //主结构生成输出        self.createSubject();
        //绑定事件        self.bindEvent();
        //初始化回调        configure.onInit.call(self);    };
    Cityselect.prototype.groupCity = function () {        var self = this,            domtel = '',            letterStr,            groupArray,            list,            montage,            hide;
        for ( var i = 0; i < functionality.groupArray.length; i++ ) {            //字母数组            groupArray = functionality.groupArray[i];
            //不是热点城市的字母就不做拆分处理            letterStr = groupArray !== 'HOT' ? functionality.split(groupArray) : '';
            //添加隐藏class            hide = i > 0 ? ' hide' : '';
            //创建对应的dl            domtel += ''" data-letter="'+ groupArray +'">{dl}
';
            if (letterStr && letterStr.length > 1) {
                list = '';
                for (var j = 0; j < letterStr.length; j++) {
                    montage = functionality.montage.call(self, 0, letterStr[j]);
                    //不为空就执行下面创建节点                    if (montage) {
                        list += ''+ letterStr[j] +'
'+                                ''+ montage +'
';
                    }
                }
            } else {
                montage = functionality.montage.call(self, 0, groupArray);                                //不为空就执行下面创建节点                if (montage) {
                    list = groupArray !== 'HOT' ?                             ''+ groupArray +'
'+                            ''+ functionality.montage.call(self, 0, groupArray) +'
' :                            ''+ functionality.montage.call(self, 0, groupArray) +'
';
                }
            }
            domtel = domtel.replace('{dl}', list);        }
        return domtel;    };
    Cityselect.prototype.createSubject = function () {        var self = this,            configure = self.options,            template = functionality.template.join('');
        //添加搜索默认文本提示        template = template.replace('{placeholder}', configure.searchPlaceholder);
        //添加多选提示最大选择数        template = template.replace('{maxnum}', configure.multiMaximum);        template = template.replace('{tipnum}', configure.multiMaximum);
        //添加多选选中的值显示的方式        template = template.replace('{type}', configure.multiType === 1 ? ' multi-type' : '');
        //添加多选选中的值显示的方式        template = template.replace('{name}', configure.multiType === 1 ? '
' : '');
        //添加多选class        configure.multiSelect ? self.$selector.addClass('multi') : '';
        template = template.replace('{not}', 'not-val not-search');
        //把城市弹窗dom添加到容器中        self.$selector.html(template.replace('{cont}', self.groupCity()));
        //单选就去掉        !configure.multiSelect ?  self.$selector.find('.city-count').html(''): '';
        //没有开启搜索，就remove掉搜索dom
        if (!configure.search) {            self.$selector.find('.city-input').addClass('not-search').html(''+ configure.placeholder +'');            self.$selector.find('.city-txt').find('em').remove();        } else {            self.$selector.find('.city-input').removeClass('not-search');        }
        //没有数据输出的就添加禁止点击        functionality.forbid.call(self);    }
    Cityselect.prototype.bindEvent = function (event) {        var self = this,            configure = self.options,            $selector = self.$selector;
        //显示城市-弹窗        $selector.on('click.cityselect', '.city-info', $.proxy(functionality.showDrop, self));
        //tabs-切换索引的城市显示        $selector.on('click.cityselect', '.tab-a', $.proxy(functionality.tabs, self));
        //点击选择城市        $selector.on('click.cityselect', '.caller', $.proxy(configure.multiSelect ? functionality.multiAchieve : functionality.singleAchieve, self));
        //点击清空        $selector.on('click.cityselect', '.empty', $.proxy(self.clear, self));
        //搜索        $selector.on('keyup.cityselect', '.input-search', $.proxy(functionality.search, self));
        //键盘切换列表        $selector.on('keydown.cityselect', $.proxy(functionality.operation, self));    }
    Cityselect.prototype.unBindEvent = function (event) {        var self = this,            $selector = self.$selector;                $selector.off('click.cityselect', '.city-info');
        $selector.off('click.cityselect', '.tab-a');
        $selector.off('click.cityselect', '.caller');
        $selector.off('click.cityselect', '.empty');
        $selector.off('keyup.cityselect', '.input-search');
        $selector.off('keydown.cityselect');    }
    Cityselect.prototype.setCityVal = function (val) {        var self = this,            configure = self.options,            setCity = val.replace(/\s/g, ''),            cityArray = setCity.split(','),            name, joinSpan, mosaicName;
        if (val) {            //存储设置城市变量            self.cityVal = val;            //根据多选还是单选，多选不能超过设定的个数输出; 单选只能输出一个，设置多个只会输出第一个            !configure.multiSelect ? cityArray = cityArray.splice(0, 1) : cityArray = cityArray.splice(0, configure.multiMaximum);
            for (var i = 0; i < cityArray.length; i++) {
                $.each(self.newCityData, function (key, value) {                    name = self.options.shorthand ? value.shortName : value.name; //显示的是简称还是全称
                    if (cityArray[i] === value.name) {
                        self.multiSelectResult.push(name);                        self.multiSelectResultId.push(value.id);                        self.provinceId.push(value.parentId);
                        //添加选中状态                        self.$selector.find('.caller[data-id="'+ value.id +'"]').addClass('active');
                        //选中的值拼接dom                        joinSpan = ''" data-parentid="'+ value.parentId +'">'+ name +'';
                        //添加选中的城市显示方式                        if (configure.multiType < 1) {                            self.$selector.find('.city-input').before(joinSpan);                        }                                            }
                });
                //如果是多选才执行以下事情                if (self.options.multiSelect) {                    self.selectIndex = i + 1;                    self.$selector.find('.city-count').find('i').text(i + 1);                }
            };
            //存储设置城市的值            self.values = [];            self.multiSelectResult.length > 0 ? self.values.push({ 'name': self.multiSelectResult, 'id': self.multiSelectResultId, 'parentId': self.provinceId }) : '';
            //拼接后的选中name            mosaicName = self.multiSelectResult.join(configure.mosaic);
            //添加选中的城市显示方式            if (configure.multiType === 1) {                self.$selector.find('.city-name').html(''">'+ mosaicName +'');            }
            //有值就去掉此class            self.values.length > 0 ? self.$selector.find('.city-input').removeClass('not-val') : '';
        }    }
    Cityselect.prototype.getCityVal = function () {        //返回选中的城市        return this.values[0];    }
    Cityselect.prototype.update = function (data) {        var self = this,            template = functionality.template.join('');
        if (data.length > 0) {            //重新更新城市数据            self.newCityData = data;            //重新生成城市分组            functionality.filter(self);            //主结构生成输出            self.createSubject();            //有设置城市默认的就重新设置            self.cityVal ? self.setCityVal(self.cityVal) : '';        }    }
    Cityselect.prototype.clear = function () {        //清空选中的值        this.multiSelectResult = [];        this.multiSelectResultId = [];        this.provinceId = [];        this.values = [];        this.selectIndex = 0;        this.isfocus ? this.$selector.find('.input-search').val('').focus() : '';
        this.$selector.find('.caller').removeClass('active');        this.$selector.find('.city-count').find('i').text('0');        this.$selector.find('.city-info').find('span').remove();
        if (this.values.length < 1) {            this.$selector.find('.city-input').removeClass('hide').addClass('not-val');        }    }
    Cityselect.prototype.status = function (status) {        var self = this,            $cityInfo = self.$selector.find('.city-info');
        if (status === 'disabled') {            self.$selector.addClass('disabled').find('.input-search').prop('disabled', true);            self.unBindEvent();        } else if (status === 'readonly') {            self.$selector.addClass('readonly').find('.input-search').prop('readonly', true);            self.unBindEvent();        }    }
    //点击以外的地方就隐藏    $(document).on('click.cityselect', function (event) {        var $citySelect = $('.city-select');
        if ($citySelect.find(event.target).length < 1) {            $citySelect.removeClass('down').find('.city-pavilion, .city-list').addClass('hide');            $citySelect.find('.city-input').removeClass('search-show').find('.input-search').val('');        }    });
    $.fn.citySelect = function (options) {        return new Cityselect(options, this);    };
})(jQuery, window);

- END -

温暖提示

为了方便大家更好的学习，本公众号经常分享一些完整的单个功能案例代码给大家去练习，如果本公众号没有你要学习的功能案例，你可以联系小编（微信：xxf960513）提供你的小需求给我，我安排我们这边的开发团队免费帮你完成你的案例。

注意：只能提单个功能的需求不能要求功能太多，比如要求用什么技术，有几个页面，页面要求怎么样？

请长按识别二维码

想学习更多的java功能案例请关注

Java项目开发

如果你觉得这个案例以及我们的分享思路不错，对你有帮助，请分享给身边更多需要学习的朋友。别忘了《留言+点在看》给作者一个鼓励哦！

jquery插件实现省市县三级联动功能效果

案例功能效果图

环境介绍

完整源码获取方式

核心代码介绍

推荐案例

温暖提示