js省市区三级联动效果，jquery省市区三级联动效果，相信这样的文章，这样的资源网上已经很多，这个是自己整理的最新的省市区数据（含2017年之前的最新数据）附加的三级联动效果，最新数据可以查看这篇“自己整理的最新的全国省市区数据库，最新xml省市区数据”，里面有最新的xml格式的全国省市区数据，所以本笔记是顺便弄的一个jquery省市区三级联动效果的简单笔记，代码如下：
html：
<div class="address-box" id="select-area">
<select id="province"></select>
<select id="city"></select>
<select id="country"></select>
</div>
css:
.address-box{ width: 500px; height: 80px; margin: 100px auto;}
.address-box select{ min-width: 100px; height: 40px; font-size: 14px;}
javascript：
(function($){
$.fn.selectAddress=function(options){
//默认select的id
var defaults={
province: '#province',
city: '#city',
country: '#country'
};
var opts=$.extend({}, defaults, options),
province=$(opts.province),
city=$(opts.city),
country=$(opts.country);
//ajax公用函数
function ajaxFun(url,type,obj,selectOption){
$.ajax({
url:url,
datatype:type,
type:"GET",
success:function(xmlDoc){
var valueList = $(xmlDoc).find(selectOption);
if(obj==city || obj==country ){
valueList = $(xmlDoc).find(selectOption).children(obj);
}
$(valueList).each(function(){
obj.append("<option value='"+$(this).attr("name")+"'>"+$(this).attr("name")+"</option>");
});
}
});
}
//初始化数据
function init(){
province.append("<option value='0'>请选择省份..</option>");
city.append("<option value='0'>请选择城市..</option>");
country.append("<option value='0'>请选择县区..</option>");
var selectOption="province";
ajaxFun("area.xml","xml",province,selectOption);
}
//选择省份
province.on('change', function() {
if($(this).val() == "0") {
city.find("option").remove();
country.find("option").remove();
city.append("<option value='0'>请选择城市..</option>");
country.append("<option value='0'>请选择县区..</option>");
}else{
city.find("option").remove();
country.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",country,cityOption); //县区
}
});
//选择城市
city.on('change', function() {
country.find("option").remove();
var selectVal = $(this).val();
var selectOption="city[name="+selectVal+"]";
ajaxFun("area.xml","xml",country,selectOption);
});
init();
}
})(jQuery);
调用：
$(function(){
$(“#select-area”).selectAddress();
})
效果和代码请点击如下链接：
