淘宝省市区街道js代码

!(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文件)


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue省市区街道四级联动是通过使用JavaScript来实现的。在实现这个功能之前,我们首先需要准备一些数据。通常情况下,我们可以在数据库中或者通过网络请求获取到省市区街道的数据,然后将这些数据存储在Vue的data对象中。 数据方面,我们可以定义一个包含省、市、区和街道的四个数组,每个数组包含相应级别的数据,同时还需要定义一些变量来保存用户选择的省、市、区和街道。在页面上,我们可以通过使用Vue的v-for指令来遍历这些数据,并生成相应的下拉框。 当用户选择了省份之后,我们需要根据用户选择的省份过滤出对应的市区数据,并将这些数据放入市区的下拉框中。同样地,当用户选择了市区后,我们需要根据用户选择的市区来过滤出对应的区县数据,并将这些数据放入区县的下拉框中。最后,当用户选择了区县后,我们根据用户选择的区县来过滤出对应的街道数据,并将这些数据放入街道的下拉框中。 为了实现上述功能,我们需要使用Vue的v-on指令来监听每个下拉框的change事件,然后在事件处理函数中进行对应的数据过滤和赋值操作。具体过滤的方法可以使用JavaScript的数组的filter方法,根据用户选择的省、市、区来过滤出对应的数据。最后,我们可以使用v-model指令将用户选择的值与相应的变量进行绑定,以便后续的处理和提交操作。 综上所述,通过Vue和JavaScript的配合,我们可以实现一个省市区街道四级联动的功能,使用户能够方便地选择对应的区域和街道。这个功能在很多网页表单中都有应用,可以提供更好的用户体验和数据的准确性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值