用json+jquery+oracle怎么做省市區(qū)聯(lián)動(dòng)

script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"/script

成都創(chuàng)新互聯(lián)專注于荊門企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城建設(shè)。荊門網(wǎng)站建設(shè)公司,為荊門等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

!--讀取數(shù)據(jù)庫，以json的格式輸出，然后復(fù)制json數(shù)據(jù)，創(chuàng)建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"--請(qǐng)選擇省份--/option

/select

select id="selCity"

option value="0"--請(qǐng)選擇城市--/option

optionaaaa/option

optionaaaa/option

/select

select id="selDistrict"

option value="0"--請(qǐng)選擇區(qū)/縣--/option

/select

input type="button" id="btnOK" value="確定" /

/body

/html

jquery是實(shí)現(xiàn)美化后的省市縣區(qū)的下聯(lián)動(dòng)菜單

!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"?請(qǐng)選擇省/a

a?class="aCity"?id="aCity"請(qǐng)選擇市/a

a?class="aCity"?id="aArea"請(qǐng)選擇區(qū)縣/a

/div

/body

/html

JavaScript代碼如下：

/*

*?$.get()或$.post()方法來解析xml文件

*?*?url：指定要解析的xml文件的路徑

*?*?callback：回調(diào)函數(shù)，function(xml){}

*?*?xml：解析xml文件返回的內(nèi)容

*/

$.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?");

//遍歷所有的省，寫到第一個(gè)div中

$provinceElements.each(function?(index,?domEle)?{

var?$provinceValue?=?$(domEle).attr("name");?//獲得省的值

//創(chuàng)建span標(biāo)簽

var?$optionElement?=?$("a?class='ziduan'?href='javascript:void(0);'?/a");

//?$optionElement.attr("value",$provinceValue);

$optionElement.text($provinceValue);

//創(chuàng)建div

$divEle.append($optionElement);

});

$("#aPro").click(function?()?{

//先把市，區(qū)隱藏起來

$("#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();//獲得點(diǎn)擊的省的名稱

//賦值給省a標(biāo)簽

$("#aPro").text($clickPro);

//隱藏div

$("#divPro").hide();

//創(chuàng)建市的div

var?$clickPro?=?$("#aPro").text();

//獲得市div中的內(nèi)容，清空

$("#divCity").html("");

//市頁面上的a標(biāo)簽中的內(nèi)容變?yōu)檎?qǐng)選擇市

$("#aCity").text("請(qǐng)選擇市");

//獲得區(qū)div中的內(nèi)容，清空

$("#divArea").html("");

//市頁面上的a標(biāo)簽中的內(nèi)容變?yōu)檎?qǐng)選擇市

$("#aArea").text("請(qǐng)選擇區(qū)縣");

//?遍歷省，找到與選中值相同的，得到所有的市

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");

//創(chuàng)建option標(biāo)簽

var?$optionElement?=?$("a?class='ziduanCity'?href='javascript:void(0);'?/a");

//?$optionElement.attr("value",$provinceValue);

$optionElement.text($cityValue);

//創(chuàng)建div

$divEleCity.append($optionElement);

});

}

}

});

});

//點(diǎn)擊市，彈出下拉框

$("#aCity").click(function(){

//先把省，區(qū)隱藏起來

$("#divPro").hide();

$("#divArea").hide();

//獲得省的內(nèi)容，如果沒有選擇就不顯示div

var?$clickPro?=?$("#aPro").text();

if($clickPro.indexOf('請(qǐng)選擇省')0){

//已經(jīng)選擇了省

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();//獲得點(diǎn)擊的市的名稱

//賦值給市a標(biāo)簽

$("#aCity").text($clickCity);

//隱藏div

$("#divCity").hide();

var?$clickCity?=?$(this).text();//獲得點(diǎn)擊的市的名稱

var?$clickPro?=?$("#aPro").text();//獲得省

//獲得區(qū)div中的內(nèi)容，清空

$("#divArea").html("");

//市頁面上的a標(biāo)簽中的內(nèi)容變?yōu)檎?qǐng)選擇市

$("#aArea").text("請(qǐng)選擇區(qū)縣");

//?遍歷省，找到與選中值相同的，得到所有的市

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

//創(chuàng)建div

$divEleArea.append($optionElement);

});

}

});

}

});

});

$("#aArea").click(function(){

//先把省市隱藏起來

$("#divPro").hide();

$("#divCity").hide();

//獲得省的內(nèi)容，如果沒有選擇就不顯示div

var?$clickPro?=?$("#aPro").text();

var?$clickCity?=?$("#aCity").text();

if($clickPro.indexOf('請(qǐng)選擇省')0??$clickCity.indexOf('請(qǐng)選擇市')0?){

var?$divArea?=?$("#divArea");//獲得div,判斷是否顯示

//alert($divCity);

if($divArea.is(":hidden")){//如果省的div被隱藏，讓他顯示

$divArea.attr("style","margin-left:144px;display:block;");

}

//添加到body中

$proEle.after($divEleArea);

}

});

//給區(qū)添加click事件，獲得選中的值，并顯示在頁面上

$(".ziduanErea").live('click',function?()?{

//先把省，市隱藏起來

var?$clickArea?=?$(this).text();//獲得點(diǎn)擊的區(qū)的名稱

//賦值給省a標(biāo)簽

$("#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省市區(qū)三級(jí)聯(lián)動(dòng)

省市區(qū)要實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)，肯定要有一個(gè)級(jí)聯(lián)對(duì)應(yīng)關(guān)系，即哪個(gè)省下面有哪些市，哪些市下面有哪些區(qū)/縣，所以在json數(shù)據(jù)中就需要使用parent、id這些字面量來標(biāo)明相應(yīng)的對(duì)應(yīng)關(guān)系。當(dāng)然不一定非要用parent，其他名稱也行，只要能對(duì)應(yīng)上就行。

插件jquery.cityselect.js省市聯(lián)動(dòng)效果怎么使用

HTML

首先在head中載入jquery庫和cityselect插件。

script type="text/javascript" src="js/jquery.js"/script

script type="text/javascript" src="js/jquery.cityselect.js"/script

接下來，我們?cè)?city中，放置三個(gè)select，并且三個(gè)select分別設(shè)置class屬性為：prov、city、dist，分別表示省、市、區(qū)（縣）三個(gè)下拉框。注意如果只想實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)，則去掉第三個(gè)dist的select即可。

div id="city"

select class="prov"/select

select class="city" disabled="disabled"/select

select class="dist" disabled="disabled"/select

/div

jQuery

調(diào)用cityselect插件非常簡單，直接調(diào)用：

$("#city").citySelect();

自定義參數(shù)調(diào)用，設(shè)置默認(rèn)省市區(qū)。自定義參數(shù)調(diào)用，設(shè)置默認(rèn)省市區(qū)。

$("#city").citySelect({

url:"js/city.min.js",

prov:"湖南", //省份

city:"長沙", //城市

dist:"岳麓區(qū)", //區(qū)縣

nodata:"none" //當(dāng)子集無數(shù)據(jù)時(shí)，隱藏select

});

當(dāng)然，你還可以擴(kuò)展，自定義下拉列表選項(xiàng)數(shù)據(jù)，你可以根據(jù)需要設(shè)置下拉內(nèi)容，注意數(shù)據(jù)格式一定要為JSON格式。

$("#city").citySelect({

url:{"citylist":[

{"p":"前端技術(shù)","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":"數(shù)據(jù)庫","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},

]},

prov:"",

city:"",

dist:"",

nodata:"none"

});

你還可以利用PHP等后臺(tái)語言將數(shù)據(jù)庫中的數(shù)據(jù)轉(zhuǎn)換成JSON格式，然后使用url參數(shù)指向后臺(tái)地址也能實(shí)現(xiàn)無刷新聯(lián)動(dòng)效果。

$("#city").citySelect({

url:"data.php"

});

求jquery省市區(qū)三級(jí)聯(lián)動(dòng) 思路

先加載出省的下拉列表，選擇后再通過ajax獲取相應(yīng)的市的下拉列表

選擇市后再ajax獲取區(qū)的下拉列表。

jquery寫三級(jí)聯(lián)動(dòng),怎么把那個(gè)市屬于的哪個(gè)省分開呢

需要核心文件jquery.cityselect.js，通過ajax訪問獲取省地市數(shù)據(jù)文件

[javascript]?view plain?copy

/*

Ajax?三級(jí)省市聯(lián)動(dòng)

日期：2012-7-18

settings?參數(shù)說明

-----

url:省市數(shù)據(jù)josn文件路徑

prov:默認(rèn)省份

city:默認(rèn)城市

dist:默認(rèn)地區(qū)（縣）

nodata:無數(shù)據(jù)狀態(tài)

required:必選項(xiàng)

------------------------------?*/

(function($)?{

$.fn.citySelect?=?function(settings)?{

if?(this.length??1)?{

return;

}

;

//?默認(rèn)值

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=''請(qǐng)選擇/option";

var?city_json;

//?賦值市級(jí)函數(shù)

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;

}

;

//?遍歷賦值市級(jí)下拉列表

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();

};

//?賦值地區(qū)（縣）函數(shù)

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;

}

;

//?遍歷賦值市級(jí)下拉列表

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

//?若有傳入省份與市級(jí)的值，則選中。（setTimeout為兼容IE6而設(shè)置）

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

//?選擇省份時(shí)發(fā)生事件

prov_obj.bind("change",?function()?{

cityStart();

});

//?選擇市級(jí)時(shí)發(fā)生事件

city_obj.bind("change",?function()?{

distStart();

});

};

//?設(shè)置省市json數(shù)據(jù)

if?(typeof?(settings.url)?==?"string")?{

$.getJSON(settings.url,?function(json)?{

city_json?=?json;

init();

});

}?else?{

city_json?=?settings.url;

init();

}

;

};

})(jQuery);

新聞標(biāo)題：jquery省市聯(lián)動(dòng),jquery實(shí)現(xiàn)省市聯(lián)動(dòng)
本文網(wǎng)址：http://www.rwnh.cn/article8/dsdjcip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、定制網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)頁設(shè)計(jì)公司、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)