delegate解决绑定click事件和省份地址连级

<aside class="adr-text">
                <p class="clear choice">
                   请选择地区<span class="fr cancle">取消</span>
                </p>
                <ul class="clear adr-list">
                    <li class="fl choose">请选择</li>
                </ul>
                <div class="adr-box pro-box" style="display: block;">
                    <p>北京</p>
                    <p>河北</p>
                    <p>内蒙古</p>
                    <p>浙江</p>
                    <p>辽宁</p>
                    <p>北京</p>
                    <p>河北</p>
                    <p>山西</p>
                    <p>浙江</p>
                    <p>辽宁</p>
                </div>
                <div class="adr-box city-box">

                </div>
                <div class="adr-box area-box">

                </div>
</aside>
css样式
.adr-text{
      background: white;
      position: absolute;
      top: 45%;
      height: 55%;
      width: 100%;
}
.mask .choice{
    text-align: center;
    color: #666666;
    font-size: 1.2rem;
    padding: .8rem 0rem;
    border-bottom: 1px solid #DDDDDD ;
}
.mask .cancle{
     margin-right: 1rem;
}
.mask .adr-list{
    font-size: 1rem;
    color: #666;
    background:#F5F5F5 ;
}
.mask .adr-list li{
     padding: 0.8rem;
}
.mask li.choose{
    padding-left:0px ;
    margin-left: 0.8rem;
    color: #F35656;
    border-bottom: 2px solid #F35656;
}
.mask .adr-box{
    display: none;
    height: 80%;
    overflow-y: scroll;
}
.mask .adr-box p {
    color: #666;
    font-size: 1.2rem;
    width: 100%;
    padding: 0.8rem 0.8rem;
}
.mask .adr-box p:last-child{
    margin-bottom: 2rem;
}


js代码

var li = $(".adr-list");//动态添加选中的省市区
     var cityBox= $(".city-box"),
         proBox = $(".pro-box"),
         areaBox = $(".area-box"),
         areaText ;
     var idnexP , indexC;
     var pushText = [];//选择的具体地址
     //声明市
        var cities = [
                ["宣武区" , "丰台区" ,"石景山区"],
                ["廊坊市", "石家庄市"],
                ["呼和浩特","包头市"]

             ];
     //声明区
        var areas = [
               [
                 ["内环到三环里"],
                 ["四环到五环之间","二环到三环","三环到四环之间"],
                 ["龙泉镇","荣丁镇","大台镇"]
               ],
               [
                 ["三河市","广阳区"],
                 ["新华区","桥西区"]
               ],
               [
                 ["玉泉区","武川县"],
                 ["固阳县","东河区"]
               ]

           ];

     /*如果超出7个汉字就隐藏……*/
     $(".adr-list li").each(function(){
        var length = $(this).html().length;
        var text = $(this).html();
         if(length > 7){
           var value = text.substring(0,7)
            $(this).html(value+"...");
         }
     });

     //省和自治区和直辖市被点击时候代码
     $(".pro-box p").click(function(){
          indexP = $(this).index();
          var text = $(this).html();
          if($(".adr-list li").length == 2){
            $(".adr-list li").eq("1").addClass("choose");
            $(".adr-list li").eq("0").remove();
          }else if($(".adr-list li").length > 2){
               li.empty();
               var choose = "<li class='fl choose'>"+"请选择"+"</li>"
               li.append(choose);
          }
         var html = "<li class='fl'>"+text+"</li>"
          li.prepend(html);
           proBox.hide();
           showCity();

     });


     function showCity(){
        cityBox.show();
        cityBox.empty();
        var cityEle = cities[indexP];
        for(var i = 0 ; i < cityEle.length ; i++){
            var text = cityEle[i];
            var html = "<p>"+text+"</p>"
            cityBox.append(html);//动态添加选择对应省下面的市
        }
     }


      $(".adr-list").delegate("li","click",function(){
              var index = $(this).index();
               $(this).addClass("choose").siblings().removeClass("choose");
                $(".adr-box").hide();
               $(".adr-box").eq(index).show();
                showColor();
      });

      function showColor(){
          $(".pro-box p").css("color","#666");
          $(".pro-box p").eq(indexP).css("color","#F35656");
      }//被选中的省或者是直辖市或是自治区样式

    $(".city-box").delegate("p",'click',function(){
        var liLength = li.find("li").length;
            indexC = $(this).index();
            var text = $(this).html();
        if(liLength > 2){
            li.find("li").eq("1").html(text).removeClass("choose");
            li.find("li").eq("2").addClass("choose");
        }else{
            var html = "<li class='fl'>"+text+"</li>"
              var length = li.find("li").length-1;
              li.find("li").eq(length).before(html);
        }
          proBox.hide();
               cityBox.hide();
               showArea();  

     });

      function showArea(){
        areaBox.show();
        areaBox.empty();
        var areaEle = areas[indexP][indexC];
        for(var i = 0 ; i < areaEle.length ; i++){
            var text = areaEle[i];
            var html = "<p>"+text+"</p>"
            areaBox.append(html);//动态添加选择对应省下面的市
        }

      }


       $(".area-box").delegate("p","click",function(){
            areaText =  $(this).html();
           adrText();
       });

       function adrText(){
        pushText.length = 0;
            li.find("li").each(function(e){
                if($(this).hasClass("choose")){

                }else{
                    var text = $(this).html();
                    pushText.push(text);
                }
            });

          var addrText = pushText.join("") + areaText;
            $("#adr").val(addrText);
            $(".mask").hide();



       }


      $(".cancle").click(function(){
        $(".mask").hide();
      })

      $(".adr-p").click(function(){
         $("#adr").val(" ");
          $(".mask").show();
          var length = li.find("li").length;
          if(length > 1){
            li.empty();
               var choose = "<li class='fl choose'>"+"请选择"+"</li>"
               li.append(choose);
          }
          $(".pro-box").show();
           $(".area-box").hide();
      })

        这个效果类似于京东app的地址选择，用纯js实现，省份和城市还有区县等从数据获取，这只是模拟