三級聯動

引入插件的css和js代碼：

<link href="./css/LArea.css" rel="stylesheet" >
<script src="./js/LAreaData1.js"></script>
<script src="./js/LArea.js"></script>

html代碼：

            <div class="form-com area">
                <label for="">區域：</label>
                <input type="text" id="demo1" value="" readonly placeholder="區域選擇">
                <input type="hidden" id="value1" name="">           
            </div>

獲取後端返回的數據源和初始化插件：

// 獲取三級聯動的數據
     function getliandong(callback){
        // Action=GetAllRegions&UserId=79651
        $.ajax({                
            type: "POST",               
            url: 'http://ptest.liby.com.cn/MessageTransfer.php?c=message&m=uatjson',
            dataType:"jsonp",
            // timeout : 50000,
            data:{posdata:
                {
                    Action:'GetAllRegions',
                    UserId:''
                },  
            },  
        success: function(data){
            // alert(data);
            data = JSON.parse(data);
            // console.dir(data);
            callback(data);
            // return data;
        } ,

    });
    }





    // 將三級聯動的數據渲染到插件中
    var sanji = '';
    getliandong(function(data){
        sanji = data['data'];
        var list = [];
        var provs_data = [];
        var tmpj = 0;
        $.each(sanji,function(i){
            if(sanji[i]['Depth'] == 1){
                provs_data[tmpj] = {'text':sanji[i]['RegionName'],'value':sanji[i]['RegionId']}; 
                tmpj++;
            }
        });
        var citys_data = {};

        $.each(provs_data,function(k){
            var arr = [];
            var tmpi = 0;
            $.each(sanji,function(j){
                if(sanji[j]['Depth'] == 2 && sanji[j]['ParentId'] == provs_data[k]['value']){
                    arr[tmpi] = {'text':sanji[j]['RegionName'],'value':sanji[j]['RegionId']};
                    // citys_data[sanji[j]['ParentId']] = arr;
                    // citys_data[sanji[j]['ParentId']][tmpi] = {'text':sanji[j]['RegionName'],'value':sanji[j]['RegionId']};
                    tmpi++;
                }
            });
            citys_data[provs_data[k]['value']] = arr;
        });

        var tmp2 = [];
            var tmpm = 0;
         $.each(sanji,function(m){
            if(sanji[m]['Depth'] == 2){
                tmp2[tmpm] = {'text':sanji[m]['RegionName'],'value':sanji[m]['RegionId']}; 
                tmpm++;
            }
        });

       var dists_data = {};
       $.each(tmp2,function(l){
       var tmpk = 0;

         var arr = [];
            $.each(sanji,function(h){
                if(sanji[h]['Depth'] == 3 && sanji[h]['ParentId'] == tmp2[l]['value']){
                    arr[tmpk] = {'text':sanji[h]['RegionName'],'value':sanji[h]['RegionId']};
                    // citys_data[sanji[j]['ParentId']] = arr;
                    // citys_data[sanji[j]['ParentId']][tmpi] = {'text':sanji[j]['RegionName'],'value':sanji[j]['RegionId']};
                    tmpk++;
                }
            });
            dists_data[tmp2[l]['value']] = arr;
       });
       // delete citys_data['8822'];

       // 三級聯動的初始化
        var area2 = new LArea();
        area2.init({
            'trigger': '#demo1',
            'valueTo': '#value1',
            'keys': {
                id: 'value',
                name: 'text'
            },
            'type': 2,
            'data': [provs_data, citys_data, dists_data]
        });
    });