多级联动省市区

<!doctype html>  
  
<html>  
  
<head>  
  
<meta charset="utf-8">  
  
<title></title>  
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.ciaoca.com/jquery/cxSelect/demo/js/jquery.cxselect.min.js"></script>


</head>


<body>
<dd id="city_china_val">
                <select class="province select" data-first-title="选择省">
                  <option value="">请选择</option>
                </select>
                <select class="city select" data-first-title="选择市">
                  <option value="">请选择</option>
                </select>
                <select class="area select" data-first-title="选择地区">
                  <option value="">请选择</option>
                </select>
              </dd>
<script type="text/javascript">






var jsonData = [
{'id':'11','name':'北京市','pid':'1'},
{'id':'22','name':'县','pid':'11'},
{'id':'33','name':'区','pid':'11'},
{'id':'44','name':'朝阳区','pid':'33'},
{'id':'55','name':'密云县','pid':'22'}
];
var data = [];
var n='n';
var c='c';
var s='s';
$(jsonData).each(function(i,e){console.log(jsonData[i])
  if(jsonData[i].pid=='1'){
    data.push({});
    data[i][n]=jsonData[i].name;
    data[i][c]=jsonData[i].id;
    var sarry=[];
    var ii=0;
    $(jsonData).each(function(k,g){
      if(jsonData[k].pid==jsonData[i].id){
        sarry.push({});
        sarry[ii][n]=jsonData[k].name;
        sarry[ii][c]=jsonData[k].id;
        var karry=[];
        var kk=0;
        $(jsonData).each(function(h,z){
          if(jsonData[h].pid==jsonData[k].id){
            karry.push({});
            karry[kk][n]=jsonData[h].name;
            karry[kk][c]=jsonData[h].id;
            kk++;
          }
        })
        sarry[ii][s]=karry;
        ii++;
      }
    })


    data[i][s]=sarry;
  }
})
console.log(data)
$.cxSelect.defaults.data = data;


$('#city_china_val').cxSelect({
  selects: ['province', 'city', 'area'],
  nodata: 'none'
});
</script>
</body>
  
</html>