当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » JavaScript  » Web编程
分享到: 
收藏 +0
3
在项目中遇到需要自定义样式的省市联动地区选择功能,于是就自己实现了一个。

有网友提议改进成 省-市-县 三级联动。

现在已经修改完成,欢迎大家下载使用。(下载链接在末尾)

使用示例请参考下面的demo

已经更新demo,欢迎下载使用
2013/11/14 改进说明:
1,修复插件导致页面链接都失效的bug。
2,根据反馈,当选择省和城市的时候会清空下级值,用户需重新选取
标签: <无>

代码片段(3) [全屏查看所有代码]

1. [图片] QQ截图20130729213040.jpg    

2. [代码][JavaScript]代码     跳至 [2] [全屏预览]

function locationCard(settings) {

    var _options = $.fn.extend({ //合并配置参数
        ids: [],
        onProvinceSelect: function (name) { },
        onCitySelect: function (name) { },
        onCountySelect: function (name) { }
    }, settings);
    var provinceAndCity = _areaselect_data;
    var provinceInputId = _options.ids[0], cityInputId = _options.ids[1], countyInputId = _options.ids[2];
    var self = this;
    var pdiv, cdiv, xdiv;
    var p_list = getProvinceList(), c_list = [], x_list = [];

    var pInput = $('#' + provinceInputId);
    var cInput = $('#' + cityInputId);
    var xInput = countyInputId ? $('#' + countyInputId) : null;

    var p_pos = pInput.offset(), c_pos, x_pos;

    var cur_p = pInput.val() ? pInput.val() : null,
        cur_c = cInput.val() ? cInput.val() : null,
        cur_x = countyInputId ? (xInput.val() ? xInput.val() : null) : null;

    var c_css, p_css, x_css;

    /********************************************************************/

    function writeProvinceValue() {
        if (!cur_p) return;
        pInput.val(cur_p);
        cInput.val('');
        xInput.val('');
    }
    function writeCityValue() {
        if (!cur_c) return;
        cInput.val(cur_c);
        xInput.val('');
    }
    function writeCountyValue() {
        if (!cur_x) return;
        xInput.val(cur_x);
    }

    //显示城市列表
    function showCityList(province) {
        clearCards(); //确保展开卡片的时候,把其他卡片隐藏掉
        hideProvinceList();
        hideCountyList();
        if (!cur_p || cur_p.length == 0) { return; }
        c_list = getCityList(cur_p);
        cInput.show();

        c_pos = c_pos || cInput.offset();
        c_css = c_css || {
            'top': c_pos.top + cInput.outerHeight() + 'px',
            'left': c_pos.left + 'px'
        };
        createC(c_list).css(c_css).show();
    }
    //显示省份列表
    function showProvinceList() {
        clearCards(); //确保展开卡片的时候,把其他卡片隐藏掉
        hideCityList();
        hideCountyList();

        p_css = p_css || {
            'top': p_pos.top + pInput.outerHeight() + 'px',
            'left': p_pos.left + 'px'
        };
        createP().css(p_css).show();
    }
    //显示县级列表
    function showCountyList() {
        if (!countyInputId) { return; }
        clearCards(); //确保展开卡片的时候,把其他卡片隐藏掉
        hideProvinceList();
        hideCityList();
        if (!cur_p || cur_p.length == 0 || !cur_c || cur_c.length == 0) { return; }
        x_list = getCountyList(cur_p, cur_c);
        if (x_list == undefined) { //如果是直辖市,则不存在县级
            xInput.hide();
            return;
        }
        xInput.show();
        x_pos = x_pos || xInput.offset();
        x_css = x_css || {
            'top': x_pos.top + xInput.outerHeight() + 'px',
            'left': x_pos.left + 'px'
        };
        createX(x_list).css(x_css).show();
    }
    //隐藏省份列表
    function hideProvinceList() {
        if (pdiv && pdiv.length > 0) {
            pdiv.hide();
        }
    }

    //隐藏城市列表
    function hideCityList() {
        if (cdiv && cdiv.length > 0) {
            cdiv.hide();
        }
    }
    //隐藏县级列表
    function hideCountyList() {
        if (xdiv && xdiv.length > 0) {
            xdiv.hide();
        }
    }
    //获取省份列表
    function getProvinceList() {
        return provinceAndCity['p'];
    }
    //获取城市列表
    function getCityList(province) {
        return provinceAndCity['c'][province];
    }
    //获取县级列表
    function getCountyList(ps, cs) {
        return provinceAndCity['a'][ps + '-' + cs];
    }

    //创建县级列表
    function createX(countys) {
        var html = '';
        //如果创建过
        if (xdiv && xdiv.length > 0) {
            for (var i = 0; i < countys.length; i++) {
                html += '<a class="a" href="javascript:;">' + countys[i] + '</a>';
            }
            xdiv.html(html);
            return xdiv;
        }
        //如果没有创建过
        html += '<div id="__' + countyInputId + '" class="countys clearfix" style="display:none;">';
        for (var i = 0; i < countys.length; i++) {
            html += '<a class="a" href="javascript:;">' + countys[i] + '</a>';
        }
        html += '</div>';
        xdiv = $(html);
        xdiv.delegate('a', 'click', function (event) {
            var target = $(this);
            cur_x = target.text();
            writeCountyValue();
            hideCountyList();
            event.stopPropagation(); //阻止事件冒泡
        }).appendTo('body');
        return xdiv;
    }
    //创建城市列表
    function createC(citys) {
        var html = '';
        //如果创建过
        if (cdiv && cdiv.length > 0) {
            for (var i = 0; i < citys.length; i++) {
                html += '<a class="a" href="javascript:;">' + citys[i] + '</a>';
            }
            cdiv.html(html);
            return cdiv;
        }
        //如果没有创建过
        html += '<div id="__' + cityInputId + '" class="citys clearfix" style="display:none;">';
        for (var i = 0; i < citys.length; i++) {
            html += '<a class="a" href="javascript:;">' + citys[i] + '</a>';
        }
        html += '</div>';
        cdiv = $(html);
        cdiv.delegate('a', 'click', function (event) {
            var target = $(this);
            cur_c = target.text();
            writeCityValue();
            hideCityList();
            showCountyList();
            event.stopPropagation(); //阻止事件冒泡
        }).appendTo('body');
        return cdiv;
    }
    //创建省份列表
    function createP() {
        //如果创建过
        if (pdiv && pdiv.length > 0) {
            return pdiv;
        }
        //如果没有创建过
        var html = '<div id="__' + provinceInputId + '" class="privinces clearfix" style="display:none;">';
        for (var i = 0; i < p_list.length; i++) {
            html += '<a class="a" href="javascript:;">' + p_list[i] + '</a>';
        }
        html += '</div>';
        pdiv = $(html);
        if ($('#__' + provinceInputId).length == 0) {
            pdiv.delegate('a', 'click', function (event) {
                var target = $(this);
                cur_p = target.text();
                writeProvinceValue(cur_p);
                showCityList(cur_p);
                event.stopPropagation(); //阻止事件冒泡
            }).appendTo('body');
        }
        return pdiv;
    }
    this.setCardsHide = function () {
        hideCountyList();
        hideCityList();
        hideProvinceList();
    }
    function clearCards() {
        for (var i = 0; i < self.cards.length; i++) {
            if (self.id != i) {
                self.cards[i].setCardsHide();
            }
        }
    }
    this.init = function () {
        pInput.click(function (event) {
            showProvinceList();
            event.stopPropagation(); //阻止事件冒泡
        });
        cInput.click(function (event) {
            showCityList();
            event.stopPropagation(); //阻止事件冒泡
        });
        if (xInput) {
            xInput.click(function (event) {
                showCountyList();
                event.stopPropagation(); //阻止事件冒泡
            });
        }
            
        $(document).delegate('html', 'click', function (event) {
            var target = $(event.target);
            //console.log(target);
            if (target.closest('#__' + cityInputId).length == 0 && target.closest('#__' + provinceInputId).length == 0 && target.closest('#__' + countyInputId).length == 0) {
                hideCountyList();
                hideCityList();
                hideProvinceList();
            }
        });
        this.id = this.cards.length;
        //console.log(this.id);
        this.cards.push(this);
    }
}
locationCard.prototype = {
    cards: [] //保存卡片实例
}

3. [文件] 省市县三级联动demo.rar ~ 51KB     下载(1230)     [全屏预览]



开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(24)

  • 1楼:常育新 发表于 2013-07-24 10:27 回复此评论
     做的真不错,能加上县一级吗?
  • 2楼:bobo_ll 发表于 2013-07-24 10:55 回复此评论

    引用来自“常育新”的评论

     做的真不错,能加上县一级吗?
    可以,回头修改下。
  • 3楼:Jeedu 发表于 2013-07-24 11:29 回复此评论
    支持一下,回头下载你的最新加上县级的版本
  • 4楼:Jeedu 发表于 2013-07-24 11:32 回复此评论
    还有一点,在搜索的时候,如果可以加上checkbox多选,相对来说就更完美了,目前只适用于添加单条信息。楼主可以考虑一下!
  • 5楼:常育新 发表于 2013-07-26 18:41 回复此评论

    引用来自“bobo_ll”的评论

    引用来自“常育新”的评论

     做的真不错,能加上县一级吗?
    可以,回头修改下。
    非常感谢,期待!~~~
  • 6楼:bobo_ll 发表于 2013-07-26 22:02 回复此评论

    引用来自“常育新”的评论

    引用来自“bobo_ll”的评论

    引用来自“常育新”的评论

     做的真不错,能加上县一级吗?
    可以,回头修改下。
    非常感谢,期待!~~~
    已经修改完成~~欢迎下载使用~~~
  • 7楼:常育新 发表于 2013-07-27 11:23 回复此评论

    引用来自“bobo_ll”的评论

    引用来自“常育新”的评论

    引用来自“bobo_ll”的评论

    引用来自“常育新”的评论

     做的真不错,能加上县一级吗?
    可以,回头修改下。
    非常感谢,期待!~~~
    已经修改完成~~欢迎下载使用~~~
    已经下了,非常感谢!
  • 8楼:GYI_Feison 发表于 2013-07-29 17:56 回复此评论
    哇 感谢 做的项目正需要这个东西
  • 9楼:忆于风 发表于 2013-09-18 12:31 回复此评论
    漂亮~~牛。
  • 10楼:jasonleeoschina 发表于 2013-09-27 15:40 回复此评论
    没有分数,不能下载啊。  郁闷
  • 11楼:cwuvicky 发表于 2013-09-29 20:09 回复此评论
    您好,当我将该段代码放入网页中,我所在网页的全部链接失效,请问如何解决该问题呢?谢谢……
  • 12楼:愤怒的小五哥 发表于 2013-10-28 14:24 回复此评论
    非常感谢!
  • 13楼:hallshx 发表于 2013-11-13 16:31 回复此评论
    使用的下 ,效果很好,但是有个bug 例如如果确定了省,市,区  那么再修改省的时候 市 区就该变成空,让重新选择,修改市的时候,区就该变成空 ,让重新选择 感谢楼主分享
    另外说一下··我页面的所有链接也失效了 = =
  • 14楼:bobo_ll 发表于 2013-11-14 13:19 回复此评论

    引用来自“cwuvicky”的评论

    您好,当我将该段代码放入网页中,我所在网页的全部链接失效,请问如何解决该问题呢?谢谢……
    你好 已经修复这个问题了
  • 15楼:bobo_ll 发表于 2013-11-14 13:21 回复此评论

    引用来自“hallshx”的评论

    使用的下 ,效果很好,但是有个bug 例如如果确定了省,市,区  那么再修改省的时候 市 区就该变成空,让重新选择,修改市的时候,区就该变成空 ,让重新选择 感谢楼主分享
    另外说一下··我页面的所有链接也失效了 = =
    你好 链接无效已经修复了。也已经根据你的建议修改了。欢迎下载使用
  • 16楼:jyd多多 发表于 2014-05-04 10:06 回复此评论
    怎么获取到选择的省份与城市的值呢
  • 17楼:HaKKas 发表于 2014-07-17 16:55 回复此评论
    支持下
  • 18楼:啊均 发表于 2014-12-16 20:01 回复此评论
    请问为什么获取不了input的值呢
  • 19楼:Mashil 发表于 2015-04-02 18:17 回复此评论
    同样的疑问,如何获取input的值
  • 20楼:hehda 发表于 2015-07-21 15:33 回复此评论
    能不能把测试页面也打包进去一下。