在開發過程中，遇到過非常多的二級聯動，下面是我總結出來的幾種二級聯動案例
二級聯動（1）
第一種案例是一種比較簡單的二級聯動，利用jquery的顯示隱藏來實現，對於數據較少的二級聯動來說可以采納
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>二級聯動</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>
/*獲取數據*/
<input type="button" value="點我" onclick="getSelectValue();">
</body>
</html>
二級聯動（2）- Array
第二種案例是使用二維數組傳數據，使用javascript
<html>
<head>
<meta charset="utf-8" />
<title>二級聯動</title>
<script>
var arr = new Array();
arr[0 ]="東城,西城,崇文,宣武,朝陽,豐台,石景山,海澱,門頭溝,房山,通州,順義,昌平,大興,平谷,懷柔,密雲,延慶"
arr[1 ]="黃浦,盧灣,徐匯,長寧,靜安,普陀,閘北,虹口,楊浦,闵行,寶山,嘉定,浦東,金山,松江,青浦,南匯,奉賢,崇明"
arr[2 ]="和平,東麗,河東,西青,河西,津南,南開,北辰,河北,武清,紅挢,塘沽,漢沽,大港,寧河,靜海,寶坻,薊縣"
arr[3 ]="萬州,涪陵,渝中,大渡口,江北,沙坪壩,九龍坡,南岸,北碚,萬盛,雙挢,渝北,巴南,黔江,長壽,綦江,潼南,銅梁,大足,榮昌,壁山,梁平,城口,豐都,墊江,武隆,忠縣,開縣,雲陽,奉節,巫山,巫溪,石柱,秀山,酉陽,彭水,江津,合川,永川,南川"
arr[4 ]="石家莊,邯鄲,邢台,保定,張家口,承德,廊坊,唐山,秦皇島,滄州,衡水"
arr[5 ]="太原,大同,陽泉,長治,晉城,朔州,呂梁,忻州,晉中,臨汾,運城"
arr[6 ]="呼和浩特,包頭,烏海,赤峰,呼倫貝爾盟,阿拉善盟,哲裡木盟,興安盟,烏蘭察布盟,錫林郭勒盟,巴彥淖爾盟,伊克昭盟"
arr[7 ]="沈陽,大連,鞍山,撫順,本溪,丹東,錦州,營口,阜新,遼陽,盤錦,鐵嶺,朝陽,葫蘆島"
arr[8 ]="長春,吉林,四平,遼源,通化,白山,松原,白城,延邊"
arr[9 ]="哈爾濱,齊齊哈爾,牡丹江,佳木斯,大慶,綏化,鶴崗,雞西,黑河,雙鴨山,伊春,七台河,大興安嶺"
arr[10 ]="南京,鎮江,蘇州,南通,揚州,鹽城,徐州,連雲港,常州,無錫,宿遷,泰州,淮安"
arr[11 ]="杭州,寧波,溫州,嘉興,湖州,紹興,金華,衢州,舟山,台州,麗水"
arr[12 ]="合肥,蕪湖,蚌埠,馬鞍山,淮北,銅陵,安慶,黃山,滁州,宿州,池州,淮南,巢湖,阜陽,六安,宣城,亳州"
arr[13 ]="福州,廈門,莆田,三明,泉州,漳州,南平,龍巖,寧德"
arr[14 ]="南昌市,景德鎮,九江,鷹潭,萍鄉,新馀,贛州,吉安,宜春,撫州,上饒"
arr[15 ]="濟南,青島,淄博,棗莊,東營,煙台,濰坊,濟寧,泰安,威海,日照,萊蕪,臨沂,德州,聊城,濱州,菏澤"
arr[16 ]="鄭州,開封,洛陽,平頂山,安陽,鶴壁,新鄉,焦作,濮陽,許昌,漯河,三門峽,南陽,商丘,信陽,周口,駐馬店,濟源"
arr[17 ]="武漢,宜昌,荊州,襄樊,黃石,荊門,黃岡,十堰,恩施,潛江,天門,仙桃,隨州,鹹寧,孝感,鄂州"
arr[18 ]="長沙,常德,株洲,湘潭,衡陽,岳陽,邵陽,益陽,婁底,懷化,郴州,永州,湘西,張家界"
arr[19 ]="廣州,深圳,珠海,汕頭,東莞,中山,佛山,韶關,江門,湛江,茂名,肇慶,惠州,梅州,汕尾,河源,陽江,清遠,潮州,揭陽,雲浮"
arr[20 ]="南寧,柳州,桂林,梧州,北海,防城港,欽州,貴港,玉林,南寧地區,柳州地區,賀州,百色,河池"
arr[21 ]="海口,三亞"
arr[22 ]="成都,綿陽,德陽,自貢,攀枝花,廣元,內江,樂山,南充,宜賓,廣安,達川,雅安,眉山,甘孜,涼山,泸州"
arr[23 ]="貴陽,六盤水,遵義,安順,銅仁,黔西南,畢節,黔東南,黔南"
arr[24 ]="昆明,大理,曲靖,玉溪,昭通,楚雄,紅河,文山,思茅,西雙版納,保山,德宏,麗江,怒江,迪慶,臨滄"
arr[25 ]="拉薩,日喀則,山南,林芝,昌都,阿裡,那曲"
arr[26 ]="西安,寶雞,鹹陽,銅川,渭南,延安,榆林,漢中,安康,商洛"
arr[27 ]="蘭州,嘉峪關,金昌,白銀,天水,酒泉,張掖,武威,定西,隴南,平涼,慶陽,臨夏,甘南"
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;
//將城市數組中的值填充到城市下拉框中
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 >內蒙古</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>
二級聯動（3）- Ajax
第三種案例是使用ajax
<!DOCTYPE html>
<html>
<head>
<title>二級聯動</title>
<meta charset="utf-8" />
</head>
<body>
<!-- 二級聯動 -->
<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的元素內容清空
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. 創建對應的城市列表 - 數組
var cities = [];
switch (province){
case "山東省":
cities = ["青島市","濟南市","威海市","日照市","德州市"];
break;
case "吉林省":
cities = ["長春市","松原市","吉林市","通化市","四平市"];
break;
case "遼寧省":
cities = ["沈陽市","大連市","鐵嶺市","丹東市","錦州市"];
break;
}
// 遍歷城市列表
for(var i=0;i<cities.length;i++){
// 4. 創建<option>元素
var option = document.createElement("option");
// 5. 將城市的信息添加到<option>元素上
var textNode = document.createTextNode(cities[i]);
option.appendChild(textNode);
// 6. 將創建的所有<option>元素添加到id為city元素上
city.appendChild(option);
}
}
</script>
</body>
</html>
二級聯動（3-1）- Ajax/php
第三種案例是使用ajax,從php中獲取數據
<!DOCTYPE html>
<html>
<head>
<title>Ajax案例一</title>
<meta charset="utf-8" />
</head>
<body>
<!-- 二級聯動 -->
<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的元素內容清空
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. 創建對應的城市列表 - 數組
var cities = [];
switch (province){
case "山東省":
cities = ["青島市","濟南市","威海市","日照市","德州市"];
break;
case "吉林省":
cities = ["長春市","松原市","吉林市","通化市","四平市"];
break;
case "遼寧省":
cities = ["沈陽市","大連市","鐵嶺市","丹東市","錦州市"];
break;
}
// 遍歷城市列表
for(var i=0;i<cities.length;i++){
// 4. 創建<option>元素
var option = document.createElement("option");
// 5. 將城市的信息添加到<option>元素上
var textNode = document.createTextNode(cities[i]);
option.appendChild(textNode);
// 6. 將創建的所有<option>元素添加到id為city元素上
city.appendChild(option);
}
}
</script>
</body>
</html>
php:
<?php
// 用於處理客戶端請求二級聯動的數據
// 1. 接收客戶端發送的省份信息
$province = $_POST['provcince'];
// 2. 判斷當前的省份信息,提供不同的城市信息
switch ($province){
case '山東省':
echo '青島市,濟南市,威海市,日照市,德州市';
break;
case '遼寧省':
echo '沈陽市,大連市,鐵嶺市,丹東市,錦州市';
break;
case '吉林省':
echo '長春市,松原市,吉林市,通化市,四平市';
break;
}
// 服務器端響應的是字符串
?>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。