jq 实现无限级地区联动 样式为bootstrap

HTML 部分

<div class="row" style="margin:100px auto;">
    <form method="post">
        <div class="col-md-12" id="area">
            <div class="col-md-2 pr0">
                <select name='area[]' num='0' class="form-control input-sm select" id="main" onchange="change(this)">
                    <option>请选择地区</option>
                </select>
            </div>
       </div>
        <button type="submit">tijiao</button>
   </form>
</div>

js部分

<script>
   // 首次获取 ajax数据
    $.get("http://127.0.0.1:83/areas/sec", {id:'0'},
        function(data){
        var option="<option value=''>请选择</option>";
        var list=data.data;
        for(var key in list){
           // console.log(key);
           // console.log(data[key].areaname);
            option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
        }
        $('#main').html(option);
  },'jsonp');
  
  function change(event){
      $('.select').each(function(i){
          //清除重选后的 老节点
          console.log($(event).attr('num'));
          if($(this).attr('num')>$(event).attr('num')){
              $(this).parent().remove();
          }
      })
      
        var sel=$('.select').index($(event))+1;
        var id=$(event).val();
        $.ajax({
          type: "get",
          dataType:"jsonp",
          url: "http://127.0.0.1:83/areas/sec",
          data: {id:id},
          sync: false,//设置为同步
          success: function(data){
            console.log(data);
            var list =data.data
            if(data.state==='1'){
                var option="<option value=''>请选择</option>";
                for(var key in list){
                    option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
                }
                 //$('#tmp').html(option);
                 //tmp=option
                $('<div class="col-md-2 pr0"><select name="area[]" num="'+sel+'" class="form-control input-sm select" onchange="change(this)">'+option+'</select></div>').appendTo('#area');
             }
          }
       });
    }
</script>

后端返回的数据为

{
state:1,
data:{
{1:{
    areaname:"呼和浩特市"
    id:"150100"
    level:"2"
    pid:"150000"
　}...
}}