淘宝省市区街道js代码

这是一个基于jQuery的JavaScript代码示例,用于在网页中实现淘宝风格的省市区街道选择功能。通过调用(Address)函数并设置回调函数,可以获取用户选择的地址信息并显示在输入框中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

!(function(b) {
    b.fn.Address = function(k) {
        var F = b.extend({
            callback: function() {}
        }, k);
        b(this).bind("click", function() {
            l.css("display", "block")
        });
        var l = b("<div>").attr("id", "city-select");
        b(this).after(l);
        var i = b("<div>").attr("id", "city-select-tab");
        l.append(i);
        var t = b("<a>").attr("href", "javascript:void(0);").addClass("current").attr("id", "tab_province").html("省份");
        var H = b("<a>").attr("href", "javascript:void(0);").attr("id", "tab_city").html("城市");
        var e = b("<a>").attr("href", "javascript:void(0);").attr("id", "tab_district").html("县区");
        var s = b("<a>").attr("href", "javascript:void(0);").attr("id", "tab_street").addClass("last").html("街道");
        i.append(t).append(H).append(e).append(s);
        var y = function() {
            b("#city-select-tab").find(".current").removeClass("current");
            b(this).addClass("current");
            b("#city-select-content").find(".current").removeClass("current");
            var j = b(this).attr("id");
            if (j == "tab_province") {
                b("#city-province").addClass("current")
            } else {
                if (j == "tab_city") {
                    b("#city-city").addClass("current")
                } else {
                    if (j == "tab_district") {
                        b("#city-district").addClass("current")
                    } else {
                        b("#city-street").addClass("current")
                    }
                }
            }
        };
        b("#city-select-tab").children("a").each(function(j, m) {
            b(this).bind("click", y)
        });
        var o = b("<div>").attr("id", "city-select-content");
        l.append(o);
        
        var g = function(j, J, m, p) {
            var K = b("<dl>");
            j.append(K);
            if (p) {
                var n = b("<dt>").html(J);
                K.append(n)
            }
            var M = b("<dd>");
            K.append(M);
            for (var q = 0; q < m.length; q++) {
                var L = b("<a>").html(m[q].n).attr("attr-id", m[q].i).attr("href", "javascript:void(0);").attr("title", m[q].n);
                L.bind("click", r);
                M.append(L)
            }
        };
        var JsonCallback=function(q,J,q_index,h,callback2){
        $.ajaxSettings.async = false;
        $.getJSON("js/pcas-code.json",function(data){
        eachfun(data,q,J,q_index,h,callback2);
        })
        };
        var eachfun=function(data,q,J,q_index,h,callback2){
        $.each(data,function(ind,obj){
        if(obj.n==q_index){
        if(callback2){
        callback2(obj.childs);
        }
        else{
        all_fun(h,obj.childs,q,J);
        }
       
        }
        })
        };
        var all_fun=function(h,obj,q,J){
        g(h,null,obj,false);
        F.callback(q, J);
        }
       var r = function() {
            var p = b(this).closest(".city-wrapper");
            p.find(".selected").removeClass("selected");
            p.nextAll(".city-wrapper").find(".selected").removeClass("selected");
            b(this).addClass("selected");
            var m = p.attr("id");
            var q = new Array();
        var J = new Array();
            b("#city-select-content").find(".selected").each(function(L, M) {
                q[L] = b(this).attr("title");
                J[L] = b(this).attr("attr-id");
                
            });
            if (m == "city-province") {
                h.html("");
                b("#tab_city").trigger("click");
              JsonCallback(q,J,q[0],h);
               
            } else {
                if (m == "city-city") {
                    C.html("");
                    b("#tab_district").trigger("click");
                   //根据城市得到县区
                  JsonCallback(q,J,q[0],h,function(data){
                  eachfun(data,q,J,q[1],C);
                  });
                } else {
                    if (m == "city-district") {
                    w.html("");
                    b("#tab_street").trigger("click");
                    JsonCallback(q,J,q[0],h,function(data){
                  eachfun(data,q,J,q[1],C,function(data2){
                  eachfun(data2,q,J,q[2],w);
                  });
                  });
                        var j = function(N) {
                            w.html("");
                            if (N.length > 0) {
                                g(w, null, N, false)
                            }
                            var M = b("<a>", {
                                title: "稍后再说",
                                href: "javascript:void(0);"
                            }).html("稍后再说");
                            M.bind("click", function() {
                                l.css("display", "none")
                            });
                            var L = b("<span>").html("先填详细地址,稍后再获取街道地址");
                            console.log(L)
                            w.append(b("<dl>").append(b("<dd>").append(M).append(L)).attr("class", "dl-border-top"));
                            F.callback(q, J)
                        }
                    } else {
                        F.callback(q, J);
                        l.css("display", "none")
                    }
                }
            }
        };
        var I = b("<div>").attr("class", "city-wrapper").attr("id", "city-province").addClass("current");
        o.append(I);
       var d=[];
       $.ajaxSettings.async = false;
       $.getJSON("js/pcas-code.json",function(data){
        d=data;
        })
        var E = new Array();
        var v = new Array();
        var z = new Array();
        var G = new Array();
        d.sort(function(m, j) {
        //.sort按从小到大排序
            return m.s.charCodeAt() - j.s.charCodeAt()
        });
        var B = 0
          , A = 0
          , x = 0
          , u = 0;
        for (var D = 0; D < d.length; D++) {
            var f = d[D].s.charCodeAt();
            if (96 < f && f < 104) {
                E[B] = d[D];
                B++
            } else {
                if (103 < f && f < 108) {
                    v[A] = d[D];
                    A++
                } else {
                    if (107 < f && f < 116) {
                        z[x] = d[D];
                        x++
                    } else {
                        G[u] = d[D];
                        u++
                    }
                }
            }
        }
        g(I, "A-G", E, true);
        g(I, "H-K", v, true);
        g(I, "L-S", z, true);
        g(I, "T-Z", G, true);
        h = b("<div>").attr("class", "city-wrapper").attr("id", "city-city");
        o.append(h);
        C = b("<div>").attr("class", "city-wrapper").attr("id", "city-district");
        o.append(C);
        w = b("<div>").attr("class", "city-wrapper").attr("id", "city-street");
        o.append(w)
       
    };
}


)(jQuery);



/*html中调用的办法*/

<div id="aa" class="cc"><input /></div>

<script>
$("#aa").Address({
callback:function(infos,selected_ids) {
var str = '';
for(var i=0;i<infos.length;i++) {
str = str+infos[i];
}
$('#aa input').val(str);
}
});
</script>

(附带的json文件)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值