最近的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 省市县三级联动静态页面效果，感谢该作者的分享。城市的数据可能随时间不同会有些变化，注意更新。
网友评论