省份选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
有四川和广东两个省
选择四川:出现成都、德阳、绵阳
穿着广东:出现广州、深圳、东莞
-->
<select id="province" onchange="chooseCity(this)">
<option value="0">四川</option>
<option value="1">福建</option>
<option value="2">广东</option>
<option value="3">湖南</option>
</select>
<select id="city"></select>
</body>
<script>
var province = document.getElementById("province");
var city = document.getElementById("city");
var citys = [["成都", "都江堰", "巴中", "泸州"], ["福州", "厦门", "泉州"], ["广州", "汕头", "潮州"], ["长沙", "株洲", "湘西"]];
function chooseCity(pro) {
for (var i = 0; i < citys.length; i++)
if (pro.value == i) {
city.options.length = 0;
for (var j = 0; j < citys[i].length; j++) {
var optionEle = document.createElement("option");
city.appendChild(optionEle);
optionEle.innerHTML = citys[i][j];
}
}
}
chooseCity(province);
</script>
</html>

posted @ 2015-12-13 22:06  ShirleyHe  阅读(742)  评论(0编辑  收藏  举报