最近在寫個(gè)人網(wǎng)站的時(shí)候峦树，個(gè)人信息完善界面辣辫，有個(gè)填寫地址的需求，當(dāng)然不能讓人家自己輸入魁巩，所以就需要提供選擇急灭，用HTML+jQuery寫了個(gè)城市三級聯(lián)動(dòng)
源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 導(dǎo)入jQuery -->
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div style="text-align: center;margin-top: 20%;">
<!-- 省選擇器 -->
<select id="province">
</select>
<!-- 市選擇器 -->
<select id="city">
</select>
<!-- 區(qū)縣選擇器 -->
<select id="area">
</select>
<button id="confirmBtn">確定</button>
</div>
<script>
/**
* 測試數(shù)據(jù)
*/
var provinces = new Array("安徽省","浙江省");
var citys = [["合肥市","蕪湖市","馬鞍山","黃山市"],["杭州市","溫州","臺州"]]
var areas = [[["包河區(qū)","瑤海區(qū)","蜀山區(qū)"],["鏡湖區(qū)","弋江區(qū)"],["花山區(qū)","雨山區(qū)","當(dāng)涂縣"],["屯溪區(qū)","黃山區(qū)"]],
[["上城區(qū)","下城區(qū)","西湖區(qū)","臨安"],["鹿城區(qū)","甌海區(qū)","龍灣區(qū)"],["仙居","三門","天臺"]]]
//填充省列表
for(var i=0;i<provinces.length;i++){
$("#province").append("<option value='"+i+"'>"+provinces[i]+"</option>")
}
//填充市列表
for(var i=0;i<citys[$("#province option:selected").val()].length;i++){
$("#city").append("<option value='"+i+"'>"+citys[$("#province option:selected").val()][i]+"</option>")
}
//填充區(qū)列表
for(var i=0;i<areas[$("#province option:selected").val()][$("#city option:selected").val()].length;i++){
$("#area").append("<option value='"+i+"'>"+areas[$("#province option:selected").val()][$("#city option:selected").val()][i]+"</option>")
}
//省份選項(xiàng)被改動(dòng)時(shí)
$("#province").change(function(){
$("#city").empty();//清空市列表
//填充市列表
for(var i=0;i<citys[$("#province option:selected").val()].length;i++){
$("#city").append("<option value='"+i+"'>"+citys[$("#province option:selected").val()][i]+"</option>")
}
$("#area").empty();
//填充區(qū)列表
for(var i=0;i<areas[$("#province option:selected").val()][$("#city option:selected").val()].length;i++){
$("#area").append("<option value='"+i+"'>"+areas[$("#province option:selected").val()][$("#city option:selected").val()][i]+"</option>")
}
})
//市選項(xiàng)被改動(dòng)時(shí)
$("#city").change(function(){
$("#area").empty();
for(var i=0;i<areas[$("#province option:selected").val()][$("#city option:selected").val()].length;i++){
$("#area").append("<option value='"+i+"'>"+areas[$("#province option:selected").val()][$("#city option:selected").val()][i]+"</option>")
}
})
//獲得所選擇的地址
$("#confirmBtn").click(function(){
alert($("#province option:selected").text() +"/" + $("#city option:selected").text() +"/"+ $("#area option:selected").text())
})
</script>
</body>
</html>
效果圖
城市三級聯(lián)動(dòng).gif
注：
如果是通過接口獲取數(shù)據(jù)，有兩個(gè)方案谷遂，一個(gè)是直接加載所有的省/市/區(qū)縣的資料葬馋，像這個(gè)demo一樣存放好數(shù)據(jù)，還有一個(gè)是在選擇之后再加載選擇的省所對應(yīng)的市（選擇市加載對應(yīng)的區(qū)縣）肾扰，前一個(gè)好處是對接口的請求次數(shù)少畴嘶，后一個(gè)好處是接收的數(shù)據(jù)量小。
如果有問題請不吝指出集晚，謝
