yii2项目中实现省市县三级联动

最近的yii2框架项目中使用地址选择，而省市县三级联动的效果最为方便，体验更好。那么在yii2的项目中该如何实现三级联动效果呢，来展示下高端操作吧。

1、首先准备城市数据

此处，我们将数据保存为xml文件的形式。
最新的xml格式的全国省市区数据city.xml（2017年前最新）。

2、yii2应用中view视图html代码如下：

生成html：

<?= $form->field($model,'address_province',['options' => ['tag' => false],'template' => '{input}'])->dropDownList([],['id'=>'province','class'=>'select']);?>
<?= $form->field($model,'address_city',['options' => ['tag' => false],'template' => '{input}'])->dropDownList([],['id'=>'city','class'=>'select']);?>
<?= $form->field($model,'address_county',['options' => ['tag' => false],'template' => '{input}'])->dropDownList([],['id'=>'county','class'=>'select']);?>

注意，这段代码仅是生成select元素的html代码，放在你的ActiveForm表单中一起提交的。
CSS：

.select {
    padding: 0 5px;
    height: 38px;
    font-size: 12px;
    border: 1px #139667 solid;
    vertical-align: middle;
    appearance: button;
    -webkit-appearance: button;
}

3、js代码

保存为jquery.cityselect.js：

/**
 * Created by Kai on 2017/12/4.
 */
/*
 Ajax 三级省市联动
 日期：2012-7-18

 settings 参数说明
 -----
 url:省市数据josn文件路径
 province:默认省份
 city:默认城市
 county:默认地区（县）
 nodata:无数据状态
 required:必选项
 ------------------------------ */
(function($){
    $.fn.selectAddress = function(options){
        //默认select的id
        var defaults={
            province: '#province',
            city: '#city',
            county: '#county'
        };
        var opts=$.extend({}, defaults, options),
            province=$(opts.province),
            city=$(opts.city),
            county=$(opts.county);
        //ajax公用函数
        function ajaxFun(url,type,obj,selectOption){
            $.ajax({
                url: "../web/statics/xml/city.xml",
                datatype:'xml',
                type:"GET",
                success:function(xmlDoc){
                    var valueList = $(xmlDoc).find(selectOption);
                    if(obj==city || obj==county ){
                        valueList = $(xmlDoc).find(selectOption).children(obj);
                    }
                    $(valueList).each(function(){
                        obj.append("<option value='"+$(this).attr("name")+"'>"+$(this).attr("name")+"</option>");
                    });
                }
            });
        }
        //初始化数据
        function init(initdata){
            if (initdata.pr === ''){      //若初始数据为空
                province.append("<option value='0'>请选择省份..</option>");
                city.append("<option value='0'>请选择城市..</option>");
                county.append("<option value='0'>请选择县区..</option>");
            }else{
                province.append("<option value='"+initdata.pr+"'>"+initdata.pr+"</option>");
                city.append("<option value='"+initdata.ci+"'>"+initdata.ci+"</option>");
                county.append("<option value='"+initdata.co+"'>"+initdata.co+"</option>");
            }

            var selectOption="province";
            ajaxFun("area.xml","xml",province,selectOption);
        }
        //选择省份
        province.on('change', function() {
            if($(this).val() == "0") {
                city.find("option").remove();
                county.find("option").remove();
                city.append("<option value='0'>请选择城市..</option>");
                county.append("<option value='0'>请选择县区..</option>");
            }else{
                city.find("option").remove();
                county.find("option").remove();
                var selectVal = $(this).val();
                //被选择的省份
                var provinceOption="province[name="+selectVal+"]";
                //当选择省份时初始联动显示的第一个城市
                var cityOption="province[name="+selectVal+"] city:first";
                ajaxFun("area.xml","xml",city,provinceOption); //城市
                ajaxFun("area.xml","xml",county,cityOption);  //县区
            }
        });
        //选择城市
        city.on('change', function() {
            county.find("option").remove();
            var selectVal = $(this).val();
            var selectOption="city[name="+selectVal+"]";
            ajaxFun("area.xml","xml",county,selectOption);
        });
        init(options);
    }
})(jQuery);

4、调用

//引入jquery.cityselect.js代码文件
<script type="text/javascript" src="statics/js/jquery.cityselect.js"></script>
<script type="text/javascript">
    var options = {pr:"<?php echo $model->getAttribute('address_province');?>",ci:"<?php echo $model->getAttribute('address_city');?>",co:"<?php echo $model->getAttribute('address_county');?>"};   //如果你的model中有省市县的初始值，作为参数传递
    $("#select-area").selectAddress(options)
</script>

5、效果图

[图片上传失败...(image-aaf6fc-1560841195961)]

说在最后，本文参考自http://www.qianduan8.com/1068.html 省市县三级联动静态页面效果，感谢该作者的分享。城市的数据可能随时间不同会有些变化，注意更新。