<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jstest2</title>
<script type="text/javascript">
window.onload = function() {
var ele1 = document.getElementById("provice");
ele1.onchange = function() {
var city = document.getElementById("city");
var cityoptins = city.getElementsByTagName("option");
for (var i = 1; i < cityoptins.length; i++) {
city.removeChild(cityoptins[i]);
i--;
}
city.childNodes = "";
var provice = this.value;
if (provice == "") {
return;
}
var arr = [ [ "山西省", "忻州", "太原", "呂梁" ],
[ "山東省", "青島", "煙臺", "濰坊" ], [ "河北省", "秦皇島", "石家莊", "張家口" ] ];
for (var i = 0; i < arr.length; i++) {
for (var j = 1; j < arr[i].length; j++) {
if (provice == arr[i][0]) {
var cityText = arr[i][j];
var cityTextNode = document.createTextNode(cityText);
var optionNode = document.createElement("option");
optionNode.appendChild(cityTextNode);
city.appendChild(optionNode);
}
}
}
}
}
</script>
</head>
<body>
內容介紹：在第一個下拉列表選擇省份，點擊第二個列表出現對應省份的城市
<br />
<select id="provice">
<option>請選擇。。</option>
<option value="山西省">山西省</option>
<option value="山東省">山東省</option>
<option value="河北省">河北省</option>
</select>
<select id="city">
<option>請選擇。。</option>
</select>
</body>
</html>
