茄子app成视频,欧美国产综合日韩一区二区 ,亚洲精品无码午夜福利理论片

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

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

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

溫馨提示：易賢網(wǎng)小編為您整理了“jquery+html+css實(shí)現(xiàn)城市三級聯(lián)動”,方便廣大網(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()方法來解析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> ");

//遍歷所有的省，寫到第一個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)檎堖x擇市

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

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

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

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

$("#aArea").text("請選擇區(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('請選擇省')<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)檎堖x擇市

$("#aArea").text("請選擇區(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('請選擇省')<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);

}

});

//給區(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;

}

更多信息請查看IT技術(shù)專欄

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

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

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

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

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

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

Python探索之SocketServer詳解10月30日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2025國考·省考課程試聽報(bào)名

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