jquery+html+css實(shí)現(xiàn)城市三級(jí)聯(lián)動(dòng)

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專(zhuān)欄 > 腳本欄目

來(lái)源：易賢網(wǎng) 閱讀：4127 次日期：2015-04-17 13:30:13

溫馨提示：易賢網(wǎng)小編為您整理了“jquery+html+css實(shí)現(xiàn)城市三級(jí)聯(lián)動(dòng)”,方便廣大網(wǎng)友查閱！

HTML代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

<html>

<head>

<title>Insert title here</title>

</head>

<body >

</div>

</body>

</html>

JavaScript代碼如下：

* $.get()或$.post()方法來(lái)解析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> ");

//遍歷所有的省，寫(xiě)到第一個(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ū)隱藏起來(lái)

$("#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)擊的省的名稱(chēng)

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

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

//隱藏div

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

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

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

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

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

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

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

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

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

//市頁(yè)面上的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ū)隱藏起來(lái)

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

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

//獲得省的內(nèi)容，如果沒(mé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事件，獲得選中的值，并顯示在頁(yè)面

$(".ziduanCity").live('click',function () {

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

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

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

//隱藏div

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

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

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

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

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

//市頁(yè)面上的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(){

//先把省市隱藏起來(lái)

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

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

//獲得省的內(nèi)容，如果沒(mé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事件，獲得選中的值，并顯示在頁(yè)面上

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

//先把省，市隱藏起來(lái)

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

//賦值給省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;

}

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄

更多信息請(qǐng)查看腳本欄目

上一篇：jquery的ajax提交方式實(shí)例

下一篇：IE不支持HTML5表單屬性placeholder的解決辦法

易賢網(wǎng)手機(jī)網(wǎng)站地址：jquery+html+css實(shí)現(xiàn)城市三級(jí)聯(lián)動(dòng)

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)！

相關(guān)閱讀腳本欄目

Bottle框架中的裝飾器類(lèi)和描述符應(yīng)用詳解10月30日

Python探索之SocketServer詳解10月30日

Python探索之實(shí)現(xiàn)一個(gè)簡(jiǎn)單的HTTP服務(wù)器10月30日

python探索之BaseHTTPServer-實(shí)現(xiàn)Web服務(wù)器介紹10月30日

13個(gè)最常用的Python深度學(xué)習(xí)庫(kù)介紹10月30日

深入理解Python中的*重復(fù)運(yùn)算符10月30日

python logging日志模塊詳解10月30日

System表空間不足的報(bào)警問(wèn)題淺析10月22日

Android開(kāi)發(fā)自定義TextView省略號(hào)樣式的方法10月22日

MySQL 清除表空間碎片的實(shí)例詳解10月22日

Ubuntu下MySQL安裝及配置遠(yuǎn)程登錄教程10月22日

Python 2.x如何設(shè)置命令執(zhí)行的超時(shí)時(shí)間實(shí)例10月22日

windows 64位下redis安裝教程10月22日

Android 自定義 HorizontalScrollView 打造多圖片OOM 的橫向滑動(dòng)效果10月22日

淺談Node Inspector 代理實(shí)現(xiàn)10月22日

java web開(kāi)發(fā)之購(gòu)物車(chē)功能實(shí)現(xiàn)示例代碼10月22日

Android開(kāi)發(fā)中GridView用法示例10月22日

Django ORM框架的定時(shí)任務(wù)如何使用詳解10月22日

SpringMail使用過(guò)程中的報(bào)錯(cuò)解決辦法10月22日

Android 使用自定義RecyclerView控件實(shí)現(xiàn)Gallery效果10月22日

易賢網(wǎng)移動(dòng)網(wǎng)站

2025國(guó)考·省考課程試聽(tīng)報(bào)名

報(bào)班類(lèi)型
姓名
手機(jī)號(hào)
驗(yàn)證碼

午夜国产狂喷潮在线观看|国产AⅤ精品一区二区久久|中文字幕AV中文字幕|国产看片高清在线