完整案例下載地址
HTML##
<html>
<head>
<title>JS全國城市三級聯動</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
</br>
</br>
</br>
</br>
</br>
<form class="form-horizontal">
<select style="width:100px;height:30px;" id="s_province" name="s_province"></select>
<select style="width:100px;height:30px;" id="s_city" name="s_city" ></select>
<select style="width:100px;height:30px;" id="s_county" name="s_county"></select>
</form>
<script class="resources library" src="js/area.js" type="text/javascript"></script>
<script type="text/javascript">_init_area();</script>
</body>
</html>
JS##
function Dsy(){
this.Items = {};
}
Dsy.prototype.add = function(id,iArray){
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id){
if(typeof(this.Items[id]) == "undefined") return false;
return true;
}
function change(v){
var str="0";
for(i=0;i<v;i++){
str+=("_"+(document.getElementById(s[i]).selectedIndex-1));
};
var ss=document.getElementById(s[v]);
with(ss){
length = 0;
options[0]=new Option(opt0[v],opt0[v]);
if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v){
if(dsy.Exists(str)){
ar = dsy.Items[str];
for(i=0;i<ar.length;i++){
options[length]=new Option(ar[i],ar[i]);
}//end for
if(v){ options[0].selected = true; }
}
}//end if v
if(++v<s.length){change(v);}
}//End with
}
var dsy = new Dsy();
dsy.add("0",["北京市","天津市","上海市","重慶市","河北省","山西省","內蒙古","遼寧省","吉林省","黑龍江省","江蘇省","浙江省","安徽省","福建省","江西省","山東省","河南省","湖北省","湖南省","廣東省","廣西","海南省","四川省","貴州省","云南省","西藏","陜西省","甘肅省","青海省","寧夏","新疆","香港","澳門","臺灣省"]);
dsy.add("0_0_0",["東城區","西城區","崇文區","宣武區","朝陽區","豐臺區","石景山區","海淀區","門頭溝區","房山區","通州區","順義區","昌平區","大興區","懷柔區","平谷區","密云縣","延慶縣","延慶鎮"]);
dsy.add("0_0",["北京市"]);
dsy.add("0_1_0",["和平區","河東區","河西區","南開區","河北區","紅橋區","塘沽區","漢沽區","大港區","東麗區","西青區","津南區","北辰區","武清區","寶坻區","薊縣","寧河縣","蘆臺鎮","靜?？h","靜海鎮"]);
dsy.add("0_1",["天津市"]);
dsy.add("0_2_0",["黃浦區","盧灣區","徐匯區","長寧區","靜安區","普陀區","閘北區","虹口區","楊浦區","閔行區","寶山區","嘉定區","浦東新區","金山區","松江區","青浦區","南匯區","奉賢區","崇明縣","城橋鎮"]);
dsy.add("0_2",["上海市"]);
dsy.add("0_3_0",["渝中區","大渡口區","江北區","沙坪壩區","九龍坡區","南岸區","北碚區","萬盛區","雙橋區","渝北區","巴南區","萬州區","涪陵區","黔江區","長壽區","合川市","永川區市","江津市","南川市","綦江縣","潼南縣","銅梁縣","大足縣","榮昌縣","璧山縣","墊江縣","武隆縣","豐都縣","城口縣","梁平縣","開縣","巫溪縣","巫山縣","奉節縣","云陽縣","忠縣","石柱土家族自治縣","彭水苗族土家族自治縣","酉陽土家族苗族自治縣","秀山土家族苗族自治縣"]);
dsy.add("0_3",["重慶市"]);
......
dsy.add("0",["北京市","天津市","上海市","重慶市","河北省","山西省","內蒙古","遼寧省","吉林省","黑龍江省","江蘇省","浙江省","安徽省","福建省","江西省","山東省","河南省","湖北省","湖南省","廣東省","廣西","海南省","四川省","貴州省","云南省","西藏","陜西省","甘肅省","青海省","寧夏","新疆","香港","澳門","臺灣省"]);
var s=["s_province","s_city","s_county"];//三個select的name
var opt0 = ["省份","地級市","區縣"];//初始值
function _init_area(){ //初始化函數
for(i=0;i<s.length-1;i++){
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
}
change(0);
}
