前端感覺寫的比較少，也是為了練手，下午沒事用來寫了這個三級聯動，也是第一次寫這東西。 據我瞭解，城市信息可以選擇存在資料庫或者直接寫在前端，為了省事，我直接寫在前端，下麵是我的代碼： <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional/ ...
前端感覺寫的比較少，也是為了練手，下午沒事用來寫了這個三級聯動，也是第一次寫這東西。
據我瞭解，城市信息可以選擇存在資料庫或者直接寫在前端，為了省事，我直接寫在前端，下麵是我的代碼：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title></title>
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
<script>
$(document).ready(function(){
//省份城市數組
var fujian_city = new Array(‘福州’,’漳州’,’廈門’,’龍岩’,’泉州’,’南平’,’莆田’,’寧德’,’三明’);
var guangdong_city = new Array(‘廣州’,’深圳’,’東莞’,’潮州’,’河源’,’汕頭’,’珠海’,’佛山’,’肇慶’,’韶關’);//城市下屬區縣數組
var fuzhou_county = new Array(‘鼓樓區’,’台江區’,’平潭’,’晉安區’,’馬尾區’,’福清市’,’長樂市’,’閩侯縣’,’連江縣’,’閩清縣’);
var zhangzhou_county = new Array(‘薌城區’,’龍文區’,’南靖縣’,’平和縣’,’龍海市’,’東山縣’,’華安縣’);
var xiamen_county = new Array(‘湖裡區’,’思明區’,’海滄區’,’集美區’,’同安縣’,’翔安區’);
//獲取省份改變的事件，並設置被選擇省份城市信息
$(“#province”).change(function(){
//清空每次選擇留下的城市信息
$(“#city”).find(“option”).remove();
//設置未選擇的城市預設狀態
$(“#city”).append(‘<option value=”未選擇”>未選擇</option>’);
//獲取被選中省份的值
var province=$(“#province”).val();
//設置城市的自定義函數
$.extend({set_cities:function(province){
var arr_length = province.length;
for(var i=1;i<=arr_length;i++){
var place_info = ‘<option value=’+province[i-1]+’>’+province[i-1]+'</option>’;
$(“#city”).append(place_info);
}
}});
switch(province){
case ‘福建’:
$.set_cities(fujian_city);
break;
case ‘廣東’:
$.set_cities( guangdong_city);
break;
default :
alert(‘沒有寫信息的省份，這裡只展示福建和廣東兩個省份’);
}
})
//獲取改變城市的事件，並設置區縣信息，這裡只寫了福建的福州、漳州、廈門的部分城市信息
$(“#city”).change(function(){
//清空每次選擇留下的區縣信息
$(“#county”).find(“option”).remove();
//設置未選擇的區縣預設狀態
$(“#county”).append(‘<option value=”未選擇”>未選擇</option>’);
//獲取被選中城市的值
var city=$(“#city “).val();
//設置區縣的自定義函數
$.extend({set_counties:function(city){
var arr_length = city.length;
for(var i=1;i<=arr_length;i++){
var place_info = ‘<option value=’+city[i-1]+’>’+city[i-1]+'</option>’;
$(“#county”).append(place_info);
}
}});
switch(city){
case ‘福州’:
$.set_counties(fuzhou_county);
break;
case ‘廈門’:
$.set_counties( xiamen_county);
break;
case ‘漳州’:
$.set_counties( zhangzhou_county);
break;
default :
alert(‘這裡只寫了福建的福州、漳州、廈門的部分城市信息’);
}
})
});
</script>
</head>
<body>
<div>
<ul>
<li><select name=”province” id=”province”>
<option value=”福建”>福建</option>
<option value=”廣東”>廣東</option>
<option value=”浙江”>浙江</option>
<option value=”江西”>江西</option>
</select>
</li>
<li><select name=”city” id=”city”>
<option value=”0″>未選擇</option>
</select>
</li>
<li>
<select name=”county” id=”county”>
<option value=”0″>未選擇</option>
</select>
</li>
</ul>
</div>
</body>
</html>
效果如下：
主要是做了這個功能，相關代碼都有些備註，淺顯易懂。如果你要使用可以直接繼續添加省份、城市的數據，或者改改採用ajax獲取數據，有不懂的代碼可以留言或者聯繫我。
