!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;
}
title纯JS省市区联动/title
script type="text/javascript" src="jsAddress.js"/script
/head
body
div
省：select id="cmbProvince"/select
市：select id="cmbCity"/select
区：select id="cmbArea"/select
br /br /
省：select id="Select1"/select
市：select id="Select2"/select
区：select id="Select3"/select
script type="text/javascript"
addressInit('cmbProvince', 'cmbCity', 'cmbArea', '陕西', '宝鸡市', '金台区');
addressInit('Select1', 'Select2', 'Select3');
/script
根据插件，调用
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"
});
以下代码放在一个单独的js文件中，在页面上引用即可调用
复制代码 代码如下:
//获取cookie值
function readCookie(name) {
var cookieValue = "";
var search = name + "=";
if (document.cookie.length 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
//保存cookie值
function writeCookie(name, value, hours, escp) {
var expire = "";
if (hours != null) {
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
if (escp == "True") {
document.cookie = name + "=" + value + expire;
} else {
document.cookie = name + "=" + escape(value) + expire;
}
}
//省市区，流域，水系，断面条件选择
$(function() {
var $ddlprovince = $("#ddlProvince"); //省份
var $ddlcity = $("#ddlCity"); //城市
var $ddlarea = $("#ddlAreaName"); //区域
//根据省份查询城市
//$ddlprovince.focus(); //不要加focus,否则设置selected有问题
$ddlprovince.bind("change keyup", function() {
if ($(this).val() != "-1") {
loadWater($(this).val(), "SelectCity");
} else {
$("select[id$=ddlCity] option").remove();
$ddlcity.append($("option/option").val("-1").html("--请选择--"));
}
//从新选择省份或者从新选择城市都会初始化区域
$("select[id$=ddlAreaName] option").remove();
$ddlarea.append($("option/option").val("-1").html("--请选择--"));
});
//如果城市没有填充数据，省份有选择数据则加载数据
if ($("select[id$=ddlCity] option").length == 1 $ddlprovince.val() != "-1") {
loadWater($ddlprovince.val(), "SelectCity");
//读cookie,有值则设为选中状态
var cityname = readCookie("JQ_CityName");
if (cityname != null cityname != "undefined" cityname != "") {
//$("select[id=ddlWaterXiName] option:contains('" + watername + "')").attr("selected", "true");
$("select[id$=ddlCity] option[value='" + cityname + "']").attr("selected", "true");
}
}
//根据城市查询区域
//$ddlcity.focus();
$ddlcity.bind("change keyup", function() {
if ($(this).val() != "-1") {
loadWater($(this).val(), "SelectAreaName");
//选中值存cookie
writeCookie("JQ_CityName", $(this).val(), 0.5, true);
} else {
$("select[name$=ddlAreaName] option").remove();
$ddlarea.append($("option/option").val("-1").html("--请选择--"));
}
});
//如果区名没有填充数据，城市有选择数据则加载数据
if ($("select[id$=ddlAreaName] option").length == 1 $ddlcity.val() != "-1") {
loadWater($ddlcity.val(), "SelectAreaName");
//读cookie,有值则设为选中状态
var areaname = readCookie("JQ_AreaName");
if (areaname != null areaname != "undefined" areaname != "") {
$("select[id=ddlAreaName] option[value='" + areaname + "']").attr("selected", "true");
}
}
$ddlarea.bind("change keyup", function() {
if ($(this).val() != "-1") {
//选中值存cookie
writeCookie("JQ_AreaName", $(this).val(), 0.5, true);
}
});
});
function loadWater(selectedItem, typename) {
$.ajax({
type: "GET",
url: "/GetWaterxiname.ashx",
data: { usetype: typename, id: selectedItem },
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function Success(data) {
bindWater(data, typename);
}
});
}
function bindWater(data, typename) {
if (typename == "SelectCity") { //绑定城市
$("select[name$=ddlCity] option").remove(); //删除原有的option
$("select[id$=ddlCity]").append($("option/option").val("-1").html("--请选择--"));
for (var i = 0; i data.length; i++) {
$("select[id$=ddlCity]").append($("option/option").val(data[i].City).html(data[i].City));
}
}
else if (typename == "SelectAreaName") {
$("select[name$=ddlAreaName] option").remove(); //删除原有的option
$("select[id$=ddlAreaName]").append($("option/option").val("-1").html("--请选择--"));
for (var i = 0; i data.length; i++) {
$("select[id$=ddlAreaName]").append($("option/option").val(data[i].AreaName).html(data[i].AreaName));
}
}
}
jquery+ajax就可以搞定的
id，菜单名称，parentid(父级id)，排序，描述
1 河北省 0
2 石家庄 1
3 东城区 2
4 西城区 2
5 廊坊 1
6 河南省 0
接下来使用 jquery + ajax来实现联动
第一级：parentid = 0 的所有菜单
第二级： 一级菜单的onchange()事件根据选中的value 比如：value=1 使用ajax获取 parentid=1的菜单，
前台代码：
select onchange="change_1()" name="sele_1" id="sele_1"
option value="1" 河北省/option
option value="2" 河南省/option
/select
select onchange="change_2()" name="sele_2" id="sele_2"
option value="2" 石家庄/option
option value="5" 廊坊/option
/select
script
function change_1(){
var strvalue=$("#sele_1").val();
$.ajax({
type:'post',
url: "PHP函数 select_ajax_1()",
data:{"specialty_1":strvalue},
dataType: "json",
success: function (data) {
console.log(data); //控制台输出
$('#sele_2').html(""); //清空
//读取json数据
for (var i=0;idata.length;i++){
// 数据库的联动菜单ID 菜单名
$('#sele_2').append("option value='"+data[i].linkageid+"' "+data[i].name+"/option");
}
},
error:function(data){
alert("异常！");
}
})
}
/script
后台php代码：
function select_ajax_1() {
//获取ajax传来的 specialty_1
$valueid = intval($_POST['specialty_1']);
/*
查询 parentid=$valueid的菜单
*/
//返回json数据
echo json_encode(查询结果数组);
}
重庆分公司
重庆分公司
