欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

三级联动

程序员文章站 2024-03-14 20:28:46
...

三级联动

引入插件的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]
        });
    });

上一篇: centOS安装jdk1.8

下一篇: 三级联动?