layui实现省市区二级联动及编辑时获取选中的值

最近在做一个项目,因为用到省市区联动,框架用的是layui框架,就自己写了个方法来实现!

因为很多地方需要使用这个,所以本人就封装了一个函数linkage.js

另外,此处用到一个省市区的js ,area.js 如有需要可以联系qq598194221

//初始加载
function Initial(province,city,area,provinceid){
    //js自动加载初始值
 
    //获取省
    layui.use('form', function(){
       var $= layui.jquery,form = layui.form;
       var object = ChineseDistricts['86'];

       var proid=$("."+provinceid).val();
       //转成数组
        parr= proid.split(",");

        var html = '';
        html += "";
        for (var i in object){
            if(i==parr[0]){
                html += "";
            }
            else{
                html += "";
            }
        }
        $("#"+province).html(html);
        //document.getElementById(province).innerHTML = html;

        //获取市
        //form.on('select('+province+')', function(data){
            var valOption = parr[0]; //获取option的value
            var object = ChineseDistricts[valOption];
            var html = '';
            html += "";
            for (var i in object) {
                if(i==parr[1]){
                    html += "";
                }
                else {
                    html += "";
                }

            }
            //document.getElementById(city).innerHTML = html;
            $("#"+city).html(html);


        //});
        //获取区
       // form.on('select('+city+')', function(data){
            var valOption = parr[1]; //获取option的value
            var object = ChineseDistricts[valOption];
            var html = '';
            html += "";
            for (var i in object) {
                if(i==parr[2]){
                    html += "";
                }
                else {
                    html += "";
                }
            }
            //document.getElementById(area).innerHTML = html;
            $("#"+area).html(html);
            form.render('select');


    })


}
//省市区三级联动
function Linkage(province,city,area){
    //获取省
    var pp=[];
    var dd=[];
    layui.use('form', function(){
        var $= layui.jquery,form = layui.form;
        var object = ChineseDistricts['86'];
        var html = '';
        html += "";
        for (var i in object) {
            html += "";
        }
        document.getElementById(province).innerHTML = html;
//获取市
        form.on('select('+province+')', function(data){
            var valOption = data.value; //获取option的value
            var province_cn = $(this).text();
            pp=[];
            dd=[];
            pp.push(province_cn);
            dd.push(valOption);
            var object = ChineseDistricts[valOption];
            var html = '';
            html += "";
            for (var i in object) {
                html += "";
            }
            document.getElementById(city).innerHTML = html;
            form.render('select');

        });
        //获取区
        form.on('select('+city+')', function(data){
            var valOption = data.value; //获取option的value
            var city_cn = $(this).text();
            if(pp.length>2) { pp.pop();pp.pop();pp.push(city_cn);}else{pp.push(city_cn);}
            if(dd.length>2) { dd.pop();dd.pop();dd.push(valOption);}else{dd.push(valOption);}

            var object = ChineseDistricts[valOption];
            var html = '';
            html += "";
            for (var i in object) {
                html += "";
            }
            document.getElementById(area).innerHTML = html;
            form.render('select');

        });
        //获取区
        form.on('select('+area+')', function(data){
            var area_cn = $(this).text();
            if(pp.length>=3){
                pp.pop();
                pp.push(area_cn);
            }else
            {
                pp.push(area_cn);
            }
            if(dd.length>=3)
            {   dd.pop();
                dd.push(data.value);
            }
            else
            {
                dd.push(data.value);
            }

            $('.'+province+'_cn').val(pp.join("/"));
            $('.'+province).val(dd.join());
        });
    })

}

引入js开始实现

      

你可能感兴趣的:(JQUERY)