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 += "<option value=''>省份/直辖市</option>";
        for (var i in object){
            if(i==parr[0]){
                html += "<option selected value=" + i + ">" + object[i] + "</option>";
            }
            else{
                html += "<option value=" + i + ">" + object[i] + "</option>";
            }
        }
        $("#"+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 += "<option value=''>市</option>";
            for (var i in object) {
                if(i==parr[1]){
                    html += "<option selected value=" + i + ">" + object[i] + "</option>";
                }
                else {
                    html += "<option value=" + i + ">" + object[i] + "</option>";
                }

            }
            //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 += "<option value=''>区</option>";
            for (var i in object) {
                if(i==parr[2]){
                    html += "<option selected value=" + i + ">" + object[i] + "</option>";
                }
                else {
                    html += "<option value=" + i + ">" + object[i] + "</option>";
                }
            }
            //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 += "<option value=''>省份/直辖市</option>";
        for (var i in object) {
            html += "<option value=" + i + ">" + object[i] + "</option>";
        }
        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 += "<option value=''>市</option>";
            for (var i in object) {
                html += "<option value=" + i + ">" + object[i] + "</option>";
            }
            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 += "<option value=''>区</option>";
            for (var i in object) {
                html += "<option value=" + i + ">" + object[i] + "</option>";
            }
            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开始实现

      <div class="layui-form-item  click_hidden click_hidden2 address_style ">
                      <label class="layui-form-label">经常居住地</label>
                      <div class="layui-input-inline">
                          <select id="province" name="province" lay-filter="province">
                              <option value="">请选择省</option>
                          </select>
                      </div>
                      <div class="layui-input-inline" >
                          <select id="city" name="city" lay-filter="city">
                              <option value="">请选择市</option>
                          </select>
                      </div>
                      <div class="layui-input-inline" ><!--style="display: none;"-->
                          <select id="area" name="area" lay-filter="area">
                              <option value="">请选择县/区</option>
                          </select>
                      </div>
                      <input type='hidden' class="province" name="contact[place_id]" value="{$row.person_concat.place_id}">
                      <input type='hidden' class="province_cn" name="contact[place]" value="{$row.person_concat.place}">
                      <div class="layui-input-4">
                          <input type="text" name="contact[detai_place]" placeholder="请输入详细地址" class="layui-input" value="{$row.person_concat.detai_place}">
                      </div>
                  </div>

<script src="/static/admin/js/linkage.js"></script>
<script>
    layui.use(['laydate','layer','form','treeSelect'], function(){
        var laydate = layui.laydate,$ = layui.jquery,layer=layui.layer,treeSelect = layui.treeSelect,form = layui.form;
    
        Linkage('province','city','area');//调用联动菜单方法
        Initial('province','city','area','province');//初始化加载的方法（编辑时用）
})

这样就实现了，联动效果和再编辑的时候自动选中该值得效果！如下图