方式一：通過js實現二級聯動下拉框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二級聯動下拉框</title>
<script>
var data = {
"北京市": ["海淀區","朝陽區","豐臺區"],
"河北省": ["石家莊","唐山","秦皇島"],
"遼寧省": ["瀋陽","大連","鞍山"],
"山東省": ["青島","濟南","煙臺"]
}
/* --通過js實現二級聯動下拉框-- */
//當選項切換時, 觸發onchange事件, 執行getCountry函數, 在函數中獲取當前選中的國家並彈出!
function getCountry(thisobj){
alert(thisobj.value);
}
//二級聯動下拉框
function selectCity(thisobj){
//1.獲取用戶選中的省份
var prov = thisobj.value;//thisobj-->省份的select
//2.根據省份獲取省份對應的城市列表
var citys = data[prov];
//3.將省份對應的所有城市作爲option選項依次填充到城市select中
//>>獲取城市select
var oCitySele = document.getElementById("city");
//在填充城市列表數據之前, 先清空之前的數據
//清理內容方式一
//oCitySele.innerHTML = "<option>--選擇城市--</option>";
var opts = oCitySele.getElementsByTagName("option");
//清理內容方式二
//>>循環遍歷option, (刪除第一個以外的所有option)
//0 號位爲選中提示，所以從1號位開始刪除，每次刪除後數組都會向前移動，所以
//遍歷刪除所有的一號位置就行
var len = opts.length;//4 3
for(var i=1; i<len;i++){
//alert(opts[1].value);
oCitySele.removeChild(opts[1]);
}
for(var i=0; i<citys.length; i++){
var opt = document.createElement("option");
opt.innerHTML = citys[i];
oCitySele.appendChild(opt);
}
}
</script>
<!--
js實現注意問題:
ie10以下的瀏覽器不支持 select,table上的innerHTML屬性
刪除option時，由於刪除後，options長度發生了變化，所以直接用for循環會有漏刪的情況，可以由後向前刪除，可以避免這樣的問題
-->
</head>
<body>
<select name="country" onchange="getCountry(this)" >
<option value="none">--選擇國家--</option>
<option value="中國">中國</option>
<option value="美國">美國</option>
<option value="日本">日本</option>
</select>
<br><br>
<hr/>
<br>
<div id="seleDiv">
<select id="province" onchange="selectCity(this)">
<option>--選擇省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>遼寧省</option>
<option>山東省</option>
</select>
<select id="city">
<option>--選擇城市--</option>
</select>
</div>
</body>
</html>
方式二：通過jQuery實現二級聯動下拉框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二級聯動下拉框</title>
<!--引入jquery庫-->
<script src="js/jquery-1.4.2.js"></script>
<script>
var data = {
"北京市": ["海淀區","朝陽區","豐臺區"],
"河北省": ["石家莊","唐山","秦皇島"],
"遼寧省": ["瀋陽","大連","鞍山"],
"山東省": ["青島","濟南","煙臺"]
}
//當選項切換時, 觸發onchange事件, 執行getCountry函數, 在函數中獲取當前選中的國家並彈出!
function getCountry(thisobj){
alert(thisobj.value);
}
//通過jQuery實現二級聯動下拉框
function selectCity(thisobj){
var prov = $(thisobj).val();//獲取用戶選中的省份
var citys = data[prov];//再根據省份獲取對應的市區
$("#city").html("<option>--選擇城市--</option>");//清空之前的數據
for(var i=0; i<citys.length; i++){
$("#city").append("<option>"+[citys[i]]+"</option>");
}
}
</script>
<!--
js實現注意問題:
ie10以下的瀏覽器不支持 select,table上的innerHTML屬性
刪除option時，由於刪除後，options長度發生了變化，所以直接用for循環會有漏刪的情況，可以由後向前刪除，可以避免這樣的問題
-->
</head>
<body>
<select name="country" onchange="getCountry(this)" >
<option value="none">--選擇國家--</option>
<option value="中國">中國</option>
<option value="美國">美國</option>
<option value="日本">日本</option>
</select>
<br><br>
<hr/>
<br>
<div id="seleDiv">
<select id="province" onchange="selectCity(this)">
<option>--選擇省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>遼寧省</option>
<option>山東省</option>
</select>
<select id="city">
<option>--選擇城市--</option>
</select>
</div>
</body>
</html>