省市区要实现三级联动，肯定要有一个级联对应关系，即哪个省下面有哪些市，哪些市下面有哪些区/县，所以在json数据中就需要使用parent、id这些字面量来标明相应的对应关系。当然不一定非要用parent，其他名称也行，只要能对应上就行。
创新互联建站是专业的网站建设公司,提供网站建设,网站制作,网站设计等网站开发一体化解决方案;包括html5,成都微信小程序,网站定制,企业网站建设,商城系统网站开发,响应式网站建设,建网站,PHP网站建设,软件开发，软文营销，网站营销。欢迎做网站的企业前来合作洽谈,创新互联建站将竭诚为您服务!
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleInsert title here/title
link href="city.css" rel="stylesheet" type="text/css" /
script type="text/javascript" src="jquery-1.4.2.js"/script
script type="text/javascript" src="1.js"/script
/head
body
div id="cityDiv"
a class="aCity" id="aPro" 请选择省/a
a class="aCity" id="aCity"请选择市/a
a class="aCity" id="aArea"请选择区县/a
/div
/body
/html
JavaScript代码如下：
/*
* $.get()或$.post()方法来解析xml文件
* * url：指定要解析的xml文件的路径
* * callback：回调函数，function(xml){}
* * xml：解析xml文件返回的内容
*/
$.get("area.xml", function (xml) {
var docXml = xml;
var $provinceElements = $(docXml).find("province");
var $proEle = $("#cityDiv"); //a链接的div
var $divEle = $("div class='dropdown_window' id='divPro'/div ");
var $divEleCity = $("div class='dropdown_window' style='margin-left:66px;' id='divCity'/div ");
var $divEleArea = $("div class='dropdown_window' style='margin-left:144px;' id='divArea'/div ");
//遍历所有的省，写到第一个div中
$provinceElements.each(function (index, domEle) {
var $provinceValue = $(domEle).attr("name"); //获得省的值
//创建span标签
var $optionElement = $("a class='ziduan' href='javascript:void(0);' /a");
// $optionElement.attr("value",$provinceValue);
$optionElement.text($provinceValue);
//创建div
$divEle.append($optionElement);
});
$("#aPro").click(function () {
//先把市，区隐藏起来
$("#divCity").hide();
$("#divArea").hide();
// alert($("#divPro"));
$proEle.after($divEle);
var $divPro = $("#divPro");//获得div,判断是否显示
if($divPro.is(":hidden")){//如果省的div被隐藏，让他显示
$divPro.attr("style","display:block;");
}
});
//给省添加click事件，获得选中的值，并显示在
$(".ziduan").live('click',function () {
var $clickPro = $(this).text();//获得点击的省的名称
//赋值给省a标签
$("#aPro").text($clickPro);
//隐藏div
$("#divPro").hide();
//创建市的div
var $clickPro = $("#aPro").text();
//获得市div中的内容，清空
$("#divCity").html("");
//市页面上的a标签中的内容变为请选择市
$("#aCity").text("请选择市");
//获得区div中的内容，清空
$("#divArea").html("");
//市页面上的a标签中的内容变为请选择市
$("#aArea").text("请选择区县");
// 遍历省，找到与选中值相同的，得到所有的市
var $flag = true;
$provinceElements.each(function (index, domEle) {
var $provinceValue = $(domEle).attr("name");
if($flag){
if ($clickPro == $provinceValue) {
$flag = false;
var $cityElements = $(domEle).find("city");
//遍历市
$cityElements.each(function (index, domEle){
var $cityValue = $(domEle).attr("name");
//创建option标签
var $optionElement = $("a class='ziduanCity' href='javascript:void(0);' /a");
// $optionElement.attr("value",$provinceValue);
$optionElement.text($cityValue);
//创建div
$divEleCity.append($optionElement);
});
}
}
});
});
//点击市，弹出下拉框
$("#aCity").click(function(){
//先把省，区隐藏起来
$("#divPro").hide();
$("#divArea").hide();
//获得省的内容，如果没有选择就不显示div
var $clickPro = $("#aPro").text();
if($clickPro.indexOf('请选择省')0){
//已经选择了省
var $divCity = $("#divCity");//获得div,判断是否显示
//alert($divCity);
if($divCity.is(":hidden")){//如果省的div被隐藏，让他显示
$divCity.attr("style","margin-left:66px;display:block;");
}
//添加到body中
$proEle.after($divEleCity);
}
});
//给市添加click事件，获得选中的值，并显示在页面
$(".ziduanCity").live('click',function () {
var $clickCity = $(this).text();//获得点击的市的名称
//赋值给市a标签
$("#aCity").text($clickCity);
//隐藏div
$("#divCity").hide();
var $clickCity = $(this).text();//获得点击的市的名称
var $clickPro = $("#aPro").text();//获得省
//获得区div中的内容，清空
$("#divArea").html("");
//市页面上的a标签中的内容变为请选择市
$("#aArea").text("请选择区县");
// 遍历省，找到与选中值相同的，得到所有的市
var $flag = true;
$provinceElements.each(function (index, domEle) {
var $provinceValue = $(domEle).attr("name");
if ($clickPro == $provinceValue) {
var $cityElements = $(domEle).find("city");
$cityElements.each(function (index, domEle) {
var $cityValue = $(domEle).attr("name");
if ($clickCity == $cityValue) {
var $countyElements = $(domEle).find("county");
$countyElements.each(function (index, domEle) {
var $countyValue = $(domEle).attr("name");
var $optionElement = $("a class='ziduanErea' href='javascript:void(0);' /a");
// $optionElement.attr("value",$provinceValue);
$optionElement.text($countyValue);
//创建div
$divEleArea.append($optionElement);
});
}
});
}
});
});
$("#aArea").click(function(){
//先把省市隐藏起来
$("#divPro").hide();
$("#divCity").hide();
//获得省的内容，如果没有选择就不显示div
var $clickPro = $("#aPro").text();
var $clickCity = $("#aCity").text();
if($clickPro.indexOf('请选择省')0 $clickCity.indexOf('请选择市')0 ){
var $divArea = $("#divArea");//获得div,判断是否显示
//alert($divCity);
if($divArea.is(":hidden")){//如果省的div被隐藏，让他显示
$divArea.attr("style","margin-left:144px;display:block;");
}
//添加到body中
$proEle.after($divEleArea);
}
});
//给区添加click事件，获得选中的值，并显示在页面上
$(".ziduanErea").live('click',function () {
//先把省，市隐藏起来
var $clickArea = $(this).text();//获得点击的区的名称
//赋值给省a标签
$("#aArea").text($clickArea);
//隐藏div
$("#divArea").hide();
});
});
CSS代码如下：
{
margin:0;
padding:0;}
.dropdown_window{
background-color: #FFFFFF;
border: 1px solid #CBE3F7;
margin: 0;
padding: 7px 0 15px 15px;
width: 257px;
overflow:hidden;
}
.aCity{
background:url(xiala.jpg) no-repeat scroll right top transparent;
border: 1px solid #7F9DB9;
color: black;
cursor: pointer;
font-size: 12px;
height: 12px;
line-height: 18px;
margin: 0;
padding: 4px 25px 2px 7px;
text-decoration: none;
}
.ziduan{
width:64px;
height:24px;
color: #004B91;
text-decoration: none;
font-size:12px;
line-height:24px;
text-align:center;
display:block;
float:left;
}
.ziduan:hover{
color:#F60;
text-decoration:underline;
}
.ziduanCity{
height:24px;
color: #004B91;
text-decoration: none;
font-size:12px;
line-height:24px;
text-align:center;
display:block;
float:left;
margin-left:5px;
margin-right:5px;
}
.ziduanCity:hover{
color:#F60;
text-decoration:underline;
}
.ziduanErea{
width:auto;
height:24px;
color: #004B91;
text-decoration: none;
font-size:12px;
line-height:24px;
text-align:center;
display:block;
float:left;
margin-left:5px;
margin-right:5px;
}
.ziduanErea:hover{
color:#F60;
text-decoration:underline;
}
script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"/script
!--读取数据库，以json的格式输出，然后复制json数据，创建js文件--
script src="json/CityJson.js" type="text/javascript"/script
script src="json/ProJson.js" type="text/javascript"/script
script src="json/DistrictJson.js" type="text/javascript"/script
script type="text/javascript"
$(function () {
$.each(province, function (k, p) {
var option = "option value='" + p.ProID + "'" + p.ProName + "/option";
$("#selProvince").append(option);
});
$("#selProvince").change(function () {
var selValue = $(this).val();
$("#selCity option:gt(0)").remove();
$.each(city, function (k, p) {
if (p.ProID == selValue) {
var option = "option value='" + p.CityID + "'" + p.CityName + "/option";
$("#selCity").append(option);
}
});
});
$("#selCity").change(function () {
var selValue = $(this).val();
$("#selDistrict option:gt(0)").remove();
$.each(District, function (k, p) {
if (p.CityID == selValue) {
var option = "option value='" + p.Id + "'" + p.DisName + "/option";
$("#selDistrict").append(option);
}
});
});
});
/script
/head
body
select id="selProvince"
option value="0"--请选择省份--/option
/select
select id="selCity"
option value="0"--请选择城市--/option
optionaaaa/option
optionaaaa/option
/select
select id="selDistrict"
option value="0"--请选择区/县--/option
/select
input type="button" id="btnOK" value="确定" /
/body
/html
需要核心文件jquery.cityselect.js，通过ajax访问获取省地市数据文件
[javascript] view plain copy
/*
Ajax 三级省市联动
日期：2012-7-18
settings 参数说明
-----
url:省市数据josn文件路径
prov:默认省份
city:默认城市
dist:默认地区（县）
nodata:无数据状态
required:必选项
------------------------------ */
(function($) {
$.fn.citySelect = function(settings) {
if (this.length 1) {
return;
}
;
// 默认值
settings = $.extend({
url: "city.min.js",
prov: null,
city: null,
dist: null,
nodata: null,
required: true
}, settings);
var box_obj = this;
var prov_obj = box_obj.find(".prov");
var city_obj = box_obj.find(".city");
var dist_obj = box_obj.find(".dist");
var prov_val = settings.prov;
var city_val = settings.city;
var dist_val = settings.dist;
var select_prehtml = (settings.required) ? "" : "option value=''请选择/option";
var city_json;
// 赋值市级函数
var cityStart = function() {
var prov_id = prov_obj.get(0).selectedIndex;
if (!settings.required) {
prov_id--;
}
;
city_obj.empty().attr("disabled", true);
dist_obj.empty().attr("disabled", true);
if (prov_id 0 || typeof (city_json.citylist[prov_id].c) == "undefined") {
if (settings.nodata == "none") {
city_obj.css("display", "none");
dist_obj.css("display", "none");
} else if (settings.nodata == "hidden") {
city_obj.css("visibility", "hidden");
dist_obj.css("visibility", "hidden");
}
;
return;
}
;
// 遍历赋值市级下拉列表
temp_html = select_prehtml;
$.each(city_json.citylist[prov_id].c, function(i, city) {
temp_html += "option value='" + city.n + "'" + city.n + "/option";
});
city_obj.html(temp_html).attr("disabled", false).css({"display": "", "visibility": ""});
distStart();
};
// 赋值地区（县）函数
var distStart = function() {
var prov_id = prov_obj.get(0).selectedIndex;
var city_id = city_obj.get(0).selectedIndex;
if (!settings.required) {
prov_id--;
city_id--;
}
;
dist_obj.empty().attr("disabled", true);
if (prov_id 0 || city_id 0 || typeof (city_json.citylist[prov_id].c[city_id].a) == "undefined") {
if (settings.nodata == "none") {
dist_obj.css("display", "none");
} else if (settings.nodata == "hidden") {
dist_obj.css("visibility", "hidden");
}
;
return;
}
;
// 遍历赋值市级下拉列表
temp_html = select_prehtml;
$.each(city_json.citylist[prov_id].c[city_id].a, function(i, dist) {
temp_html += "option value='" + dist.s + "'" + dist.s + "/option";
});
dist_obj.html(temp_html).attr("disabled", false).css({"display": "", "visibility": ""});
};
var init = function() {
// 遍历赋值省份下拉列表
temp_html = select_prehtml;
$.each(city_json.citylist, function(i, prov) {
temp_html += "option value='" + prov.p + "'" + prov.p + "/option";
});
prov_obj.html(temp_html);
// 若有传入省份与市级的值，则选中。（setTimeout为兼容IE6而设置）
setTimeout(function() {
if (settings.prov != null) {
prov_obj.val(settings.prov);
cityStart();
setTimeout(function() {
if (settings.city != null) {
city_obj.val(settings.city);
distStart();
setTimeout(function() {
if (settings.dist != null) {
dist_obj.val(settings.dist);
}
;
}, 1);
}
;
}, 1);
}
;
}, 1);
// 选择省份时发生事件
prov_obj.bind("change", function() {
cityStart();
});
// 选择市级时发生事件
city_obj.bind("change", function() {
distStart();
});
};
// 设置省市json数据
if (typeof (settings.url) == "string") {
$.getJSON(settings.url, function(json) {
city_json = json;
init();
});
} else {
city_json = settings.url;
init();
}
;
};
})(jQuery);
HTML
首先在head中载入jquery库和cityselect插件。
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript" src="js/jquery.cityselect.js"/script
接下来，我们在#city中，放置三个select，并且三个select分别设置class属性为：prov、city、dist，分别表示省、市、区（县）三个下拉框。注意如果只想实现省市二级联动，则去掉第三个dist的select即可。
div id="city"
select class="prov"/select
select class="city" disabled="disabled"/select
select class="dist" disabled="disabled"/select
/div
jQuery
调用cityselect插件非常简单，直接调用：
$("#city").citySelect();
自定义参数调用，设置默认省市区。自定义参数调用，设置默认省市区。
$("#city").citySelect({
url:"js/city.min.js",
prov:"湖南", //省份
city:"长沙", //城市
dist:"岳麓区", //区县
nodata:"none" //当子集无数据时，隐藏select
});
当然，你还可以扩展，自定义下拉列表选项数据，你可以根据需要设置下拉内容，注意数据格式一定要为JSON格式。
$("#city").citySelect({
url:{"citylist":[
{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},
{"n":"JAVASCIPT"}]},
{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},
{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},
]},
prov:"",
city:"",
dist:"",
nodata:"none"
});
你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式，然后使用url参数指向后台地址也能实现无刷新联动效果。
$("#city").citySelect({
url:"data.php"
});
先加载出省的下拉列表，选择后再通过ajax获取相应的市的下拉列表
选择市后再ajax获取区的下拉列表。
重庆分公司
重庆分公司
