JavaScript----下拉框二級聯動效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script language="JavaScript">
function getcity(element){
var pro=element.value;
var city = document.getElementById("city");
switch (pro){
case "請選擇省份":
city.length=0;
city.appendChild(new Option("請選擇城市"));
break;
case "河南省":
city.length=0;
city.appendChild(new Option("濮陽市","py"));
city.appendChild(new Option("鄭州市","zz"));
city.appendChild(new Option("鶴壁市","hb"));
break;
case "湖北省":
city.length=0;
city.appendChild(new Option("武漢","wh"));
city.appendChild(new Option("武昌","wc"));
break;
case "廣東省":
city.length=0;
city.appendChild(new Option("惠州市","hz"));
city.appendChild(new Option("深圳市","sz"));
city.appendChild(new Option("東莞市","dg"));
break;
}
}
</script>
</head>
<body>
<select onchange="getcity(this)">
<option>請選擇省份</option>
<option>河南省</option>
<option>湖北省</option>
<option>廣東省</option>
</select>
<select id="city">
<option>請選擇城市</option>
</select>
</body>
</html>