幾種二級聯(lián)動案例（jQuery\Array\Ajax php）
更新時間：2016年08月13日 14:08:30 作者：somnusy
這篇文章主要為大家詳細介紹了幾種二級聯(lián)動案例（jQuery\Array\Ajax php），具有一定的參考價值，感興趣的小伙伴們可以參考一下
在開發(fā)過程中，遇到過非常多的二級聯(lián)動，下面是我總結(jié)出來的幾種二級聯(lián)動案例
二級聯(lián)動（1）
第一種案例是一種比較簡單的二級聯(lián)動，利用jquery的顯示隱藏來實現(xiàn)，對于數(shù)據(jù)較少的二級聯(lián)動來說可以采納
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>二級聯(lián)動</title>
/*引入jquery文件*/
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var currentShowCity=0;
$(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected"))
{
$(".city").hide();
$(".city").eq(i).show();
currentShowCity=i;
}
});
});
$("#province").change();
});
function getSelectValue(){
alert("1級="+$("#province").val());
$(".city").each(function(i,o){
if(i == currentShowCity){
alert("2級="+$(".city").eq(i).val());
}
});
}
</script>
</head>
<body>
<select id="province">
<option>----請選擇省份----</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
<select class="city">
<option>----請選擇城市----</option>
</select>
<select class="city">
<option>東城</option>
<option>西城</option>
<option>崇文</option>
<option>宣武</option>
<option>朝陽</option>
<option>豐臺</option>
<option>石景山</option>
<option>海淀</option>
<option>門頭溝</option>
<option>房山</option>
<option>通州</option>
<option>順義</option>
<option>昌平</option>
<option>平谷</option>
<option>懷柔</option>
<option>密云</option>
<option>延慶</option>
</select>
<select class="city">
<option>黃浦</option>
<option>盧灣</option>
<option>徐匯</option>
<option>長寧</option>
<option>靜安</option>
<option>普陀</option>
<option>閘北</option>
<option>虹口</option>
<option>楊浦</option>
<option>閔行</option>
<option>寶山</option>
<option>嘉定</option>
<option>浦東</option>
<option>金山</option>
<option>松江</option>
<option>青浦</option>
<option>南匯</option>
<option>奉賢</option>
<option>崇</option>
</select>
<select class="city">
<option>和平</option>
<option>東麗</option>
<option>河東</option>
<option>西青</option>
<option>河西</option>
<option>津南</option>
<option>南開</option>
<option>北辰</option>
<option>河北</option>
<option>武清</option>
<option>紅撟</option>
<option>塘沽</option>
<option>漢沽</option>
<option>大港</option>
<option>寧河</option>
<option>靜海</option>
<option>寶坻</option>
<option>薊縣</option>
</select>
/*獲取數(shù)據(jù)*/
<input type="button" value="點我" onclick="getSelectValue();">
</body>
</html>
二級聯(lián)動（2）- Array
第二種案例是使用二維數(shù)組傳數(shù)據(jù)，使用javascript
<html>
<head>
<meta charset="utf-8" />
<title>二級聯(lián)動</title>
<script>
var arr = new Array();
arr[0 ]="東城,西城,崇文,宣武,朝陽,豐臺,石景山,海淀,門頭溝,房山,通州,順義,昌平,大興,平谷,懷柔,密云,延慶"
arr[1 ]="黃浦,盧灣,徐匯,長寧,靜安,普陀,閘北,虹口,楊浦,閔行,寶山,嘉定,浦東,金山,松江,青浦,南匯,奉賢,崇明"
arr[2 ]="和平,東麗,河東,西青,河西,津南,南開,北辰,河北,武清,紅撟,塘沽,漢沽,大港,寧河,靜海,寶坻,薊縣"
arr[3 ]="萬州,涪陵,渝中,大渡口,江北,沙坪壩,九龍坡,南岸,北碚,萬盛,雙撟,渝北,巴南,黔江,長壽,綦江,潼南,銅梁,大足,榮昌,壁山,梁平,城口,豐都,墊江,武隆,忠縣,開縣,云陽,奉節(jié),巫山,巫溪,石柱,秀山,酉陽,彭水,江津,合川,永川,南川"
arr[4 ]="石家莊,邯鄲,邢臺,保定,張家口,承德,廊坊,唐山,秦皇島,滄州,衡水"
arr[5 ]="太原,大同,陽泉,長治,晉城,朔州,呂梁,忻州,晉中,臨汾,運城"
arr[6 ]="呼和浩特,包頭,烏海,赤峰,呼倫貝爾盟,阿拉善盟,哲里木盟,興安盟,烏蘭察布盟,錫林郭勒盟,巴彥淖爾盟,伊克昭盟"
arr[7 ]="沈陽,大連,鞍山,撫順,本溪,丹東,錦州,營口,阜新,遼陽,盤錦,鐵嶺,朝陽,葫蘆島"
arr[8 ]="長春,吉林,四平,遼源,通化,白山,松原,白城,延邊"
arr[9 ]="哈爾濱,齊齊哈爾,牡丹江,佳木斯,大慶,綏化,鶴崗,雞西,黑河,雙鴨山,伊春,七臺河,大興安嶺"
arr[10 ]="南京,鎮(zhèn)江,蘇州,南通,揚州,鹽城,徐州,連云港,常州,無錫,宿遷,泰州,淮安"
arr[11 ]="杭州,寧波,溫州,嘉興,湖州,紹興,金華,衢州,舟山,臺州,麗水"
arr[12 ]="合肥,蕪湖,蚌埠,馬鞍山,淮北,銅陵,安慶,黃山,滁州,宿州,池州,淮南,巢湖,阜陽,六安,宣城,亳州"
arr[13 ]="福州,廈門,莆田,三明,泉州,漳州,南平,龍巖,寧德"
arr[14 ]="南昌市,景德鎮(zhèn),九江,鷹潭,萍鄉(xiāng),新馀,贛州,吉安,宜春,撫州,上饒"
arr[15 ]="濟南,青島,淄博,棗莊,東營,煙臺,濰坊,濟寧,泰安,威海,日照,萊蕪,臨沂,德州,聊城,濱州,菏澤"
arr[16 ]="鄭州,開封,洛陽,平頂山,安陽,鶴壁,新鄉(xiāng),焦作,濮陽,許昌,漯河,三門峽,南陽,商丘,信陽,周口,駐馬店,濟源"
arr[17 ]="武漢,宜昌,荊州,襄樊,黃石,荊門,黃岡,十堰,恩施,潛江,天門,仙桃,隨州,咸寧,孝感,鄂州"
arr[18 ]="長沙,常德,株洲,湘潭,衡陽,岳陽,邵陽,益陽,婁底,懷化,郴州,永州,湘西,張家界"
arr[19 ]="廣州,深圳,珠海,汕頭,東莞,中山,佛山,韶關(guān),江門,湛江,茂名,肇慶,惠州,梅州,汕尾,河源,陽江,清遠,潮州,揭陽,云浮"
arr[20 ]="南寧,柳州,桂林,梧州,北海,防城港,欽州,貴港,玉林,南寧地區(qū),柳州地區(qū),賀州,百色,河池"
arr[21 ]="?？?三亞"
arr[22 ]="成都,綿陽,德陽,自貢,攀枝花,廣元,內(nèi)江,樂山,南充,宜賓,廣安,達川,雅安,眉山,甘孜,涼山,瀘州"
arr[23 ]="貴陽,六盤水,遵義,安順,銅仁,黔西南,畢節(jié),黔東南,黔南"
arr[24 ]="昆明,大理,曲靖,玉溪,昭通,楚雄,紅河,文山,思茅,西雙版納,保山,德宏,麗江,怒江,迪慶,臨滄"
arr[25 ]="拉薩,日喀則,山南,林芝,昌都,阿里,那曲"
arr[26 ]="西安,寶雞,咸陽,銅川,渭南,延安,榆林,漢中,安康,商洛"
arr[27 ]="蘭州,嘉峪關(guān),金昌,白銀,天水,酒泉,張掖,武威,定西,隴南,平?jīng)?慶陽,臨夏,甘南"
arr[28 ]="銀川,石嘴山,吳忠,固原"
arr[29 ]="西寧,海東,海南,海北,黃南,玉樹,果洛,海西"
arr[30 ]="烏魯木齊,石河子,克拉瑪依,伊犁,巴音郭勒,昌吉,克孜勒蘇柯爾克孜,博 爾塔拉,吐魯番,哈密,喀什,和田,阿克蘇"
arr[31 ]="香港"
arr[32 ]="澳門"
arr[33 ]="臺北,高雄,臺中,臺南,屏東,南投,云林,新竹,彰化,苗栗,嘉義,花蓮,桃園,宜蘭,基隆,臺東,金門,馬祖,澎湖"
function init()
{
var city = document.getElementById("city");
var cityArr = arr[0].split(",");
for(var i=0;i<cityArr.length;i++)
{
city[i]=new Option(cityArr[i],cityArr[i]);
}
}
function getCity()
{
var pro = document.getElementById("province");
var city = document.getElementById("city");
var index = pro.selectedIndex;
var cityArr = arr[index].split(",");
city.length = 0;
//將城市數(shù)組中的值填充到城市下拉框中
for(var i=0;i<cityArr.length;i++)
{
city[i]=new Option(cityArr[i],cityArr[i]);
}
}
</script>
</head>
<body onload="init()">
<select id="province" size=1 onchange="getCity()">
<option value= 0 >北京</option>
<option value= 1 >上海</option>
<option value= 2 >天津</option>
<option value= 3 >重慶</option>
<option value= 4 >河北</option>
<option value= 5 >山西</option>
<option value= 6 >內(nèi)蒙古</option>
<option value= 7 >遼寧</option>
<option value= 8 >吉林</option>
<option value= 9 >黑龍江</option>
<option value= 10 >江蘇</option>
<option value= 11 >浙江</option>
<option value= 12 >安徽</option>
<option value= 13 >福建</option>
<option value= 14 >江西</option>
<option value= 15 >山東</option>
<option value= 16 >河南</option>
<option value= 17 >湖北</option>
<option value= 18 >湖南</option>
<option value= 19 >廣東</option>
<option value= 20 >廣西</option>
<option value= 21 >海南</option>
<option value= 22 >四川</option>
<option value= 23 >貴州</option>
<option value= 24 >云南</option>
<option value= 25 >西藏</option>
<option value= 26 >陜西</option>
<option value= 27 >甘肅</option>
<option value= 28 >寧夏</option>
<option value= 29 >青海</option>
<option value= 30 >新疆</option>
<option value= 31 >香港</option>
<option value= 32 >澳門</option>
<option value= 33 >臺灣</option>
</select>
<select id="city" style="width:60px">
</select>
</body>
</html>
二級聯(lián)動（3）- Ajax
第三種案例是使用ajax
<!DOCTYPE html>
<html>
<head>
<title>二級聯(lián)動</title>
<meta charset="utf-8" />
</head>
<body>
<!-- 二級聯(lián)動 -->
<select id="province">
<option>請選擇</option>
<option>山東省</option>
<option>遼寧省</option>
<option>吉林省</option>
</select>
<select id="city">
<option>請選擇</option>
</select>
<script>
// 1. 為<select>元素綁定onchange事件
var provinceEle = document.getElementById("province");
provinceEle.onchange = function(){
// 將id為city的元素內(nèi)容清空
var city = document.getElementById("city");
var opts = city.getElementsByTagName("option");
for(var z=opts.length-1;z>0;z--){
city.removeChild(opts[z]);
}
// 2. 獲取用戶當前選擇的省份名稱
var province = provinceEle.value;
// 3. 創(chuàng)建對應(yīng)的城市列表 - 數(shù)組
var cities = [];
switch (province){
case "山東省":
cities = ["青島市","濟南市","威海市","日照市","德州市"];
break;
case "吉林省":
cities = ["長春市","松原市","吉林市","通化市","四平市"];
break;
case "遼寧省":
cities = ["沈陽市","大連市","鐵嶺市","丹東市","錦州市"];
break;
}
// 遍歷城市列表
for(var i=0;i<cities.length;i++){
// 4. 創(chuàng)建<option>元素
var option = document.createElement("option");
// 5. 將城市的信息添加到<option>元素上
var textNode = document.createTextNode(cities[i]);
option.appendChild(textNode);
// 6. 將創(chuàng)建的所有<option>元素添加到id為city元素上
city.appendChild(option);
}
}
</script>
</body>
</html>
二級聯(lián)動（3-1）- Ajax/php
第三種案例是使用ajax,從php中獲取數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<title>Ajax案例一</title>
<meta charset="utf-8" />
</head>
<body>
<!-- 二級聯(lián)動 -->
<select id="province">
<option>請選擇</option>
<option>山東省</option>
<option>遼寧省</option>
<option>吉林省</option>
</select>
<select id="city">
<option>請選擇</option>
</select>
<script>
// 1. 為<select>元素綁定onchange事件
var provinceEle = document.getElementById("province");
provinceEle.onchange = function(){
// 將id為city的元素內(nèi)容清空
var city = document.getElementById("city");
var opts = city.getElementsByTagName("option");
for(var z=opts.length-1;z>0;z--){
city.removeChild(opts[z]);
}
// 2. 獲取用戶當前選擇的省份名稱
var province = provinceEle.value;
// 3. 創(chuàng)建對應(yīng)的城市列表 - 數(shù)組
var cities = [];
switch (province){
case "山東省":
cities = ["青島市","濟南市","威海市","日照市","德州市"];
break;
case "吉林省":
cities = ["長春市","松原市","吉林市","通化市","四平市"];
break;
case "遼寧省":
cities = ["沈陽市","大連市","鐵嶺市","丹東市","錦州市"];
break;
}
// 遍歷城市列表
for(var i=0;i<cities.length;i++){
// 4. 創(chuàng)建<option>元素
var option = document.createElement("option");
// 5. 將城市的信息添加到<option>元素上
var textNode = document.createTextNode(cities[i]);
option.appendChild(textNode);
// 6. 將創(chuàng)建的所有<option>元素添加到id為city元素上
city.appendChild(option);
}
}
</script>
</body>
</html>
php:
<?php
// 用于處理客戶端請求二級聯(lián)動的數(shù)據(jù)
// 1. 接收客戶端發(fā)送的省份信息
$province = $_POST['provcince'];
// 2. 判斷當前的省份信息,提供不同的城市信息
switch ($province){
case '山東省':
echo '青島市,濟南市,威海市,日照市,德州市';
break;
case '遼寧省':
echo '沈陽市,大連市,鐵嶺市,丹東市,錦州市';
break;
case '吉林省':
echo '長春市,松原市,吉林市,通化市,四平市';
break;
}
// 服務(wù)器端響應(yīng)的是字符串
?>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Jquery Ajax學習實例3 向WebService發(fā)出請求，調(diào)用方法返回數(shù)據(jù)
Jquery Ajax學習實例3 向WebService發(fā)出請求，調(diào)用方法返回數(shù)據(jù)2010-03-03
jQuery獲取文本節(jié)點之 text()/val()/html() 方法區(qū)別
在jquery中val,text,html都能取到值,或加一個參數(shù)來賦值,那么它們有些什么區(qū)別?2011-03-03
jQuery實現(xiàn)的小圖列表，大圖展示效果幻燈片示例
這篇文章主要介紹了jQuery實現(xiàn)的小圖列表，大圖展示效果幻燈片,結(jié)合完整實例形式分析了jQuery圖片滑動切換功能的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了jQuery實現(xiàn)的簡單懸浮層功能,結(jié)合完整實例形式分析了jQuery基于時間函數(shù)動態(tài)修改css樣式實現(xiàn)窗口浮動效果的相關(guān)技巧,需要的朋友可以參考下2017-01-01
在web頁面中，如果頁面較高，為了方便用戶快速地返回頂部，都會添加一個返回頂部按鈕2012-10-10
基于jQuery的input輸入框下拉提示層(自動郵箱后綴名)
基于jQuery的input輸入框下拉提示層，方便用戶輸入郵箱時的提示信息，需要的朋友可以參考下2012-06-06
Jquery原生態(tài)實現(xiàn)表格header頭隨滾動條滾動而滾動
表頭是浮動的，因為內(nèi)容在同一頁面展示，當滾動時，看不到列頭，為了改動少只能使用jquery原生態(tài)實現(xiàn)滾動2014-03-03
這篇文章向大家推薦了一個jQuery實現(xiàn)Tab選項卡切換效果的簡單演示，感興趣的小伙伴們可以參考一下2015-11-11
jQuery插件FusionCharts實現(xiàn)的2D面積圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的2D面積圖效果,結(jié)合完整實例形式分析了FusionCharts繪制2D面積圖的完整步驟與相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery使用echarts實現(xiàn)有向圖可視化功能示例
這篇文章主要介紹了jquery使用echarts實現(xiàn)有向圖可視化功能,結(jié)合完整實例形式分析了jquery的echarts.js插件實現(xiàn)有向圖可視化相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-11-11