jquery省市联动,jquery省市级联

一张表 怎么 jquery省市区三级联动

省市区要实现三级联动，肯定要有一个级联对应关系，即哪个省下面有哪些市，哪些市下面有哪些区/县，所以在json数据中就需要使用parent、id这些字面量来标明相应的对应关系。当然不一定非要用parent，其他名称也行，只要能对应上就行。

创新互联建站是专业的网站建设公司,提供网站建设,网站制作,网站设计等网站开发一体化解决方案;包括html5,成都微信小程序,网站定制,企业网站建设,商城系统网站开发,响应式网站建设,建网站,PHP网站建设,软件开发，软文营销，网站营销。欢迎做网站的企业前来合作洽谈,创新互联建站将竭诚为您服务!

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;

}

用json+jquery+oracle怎么做省市区联动

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写三级联动,怎么把那个市属于的哪个省分开呢

需要核心文件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);

插件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省市区三级联动 思路

先加载出省的下拉列表，选择后再通过ajax获取相应的市的下拉列表

选择市后再ajax获取区的下拉列表。