jquery是实现美化后的省市县区的下联动菜单

!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;

}

如何获取jquery省市区插件选择的内容

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

根据插件，调用

插件jquery.cityselect.js省市联动效果怎么使用

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"

});

jquery省市区三级联动编辑时怎么默认选中

以下代码放在一个单独的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省市区三级联动

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(查询结果数组);

}

本文名称：省市区jquery,省市区英文
文章网址：http://kswjz.com/article/dsddjsc.html