<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var provinces = [
["深圳","广州","中山","珠海"],
["长沙","岳阳","郴州","株洲"],
["武汉","黄冈","黄石","宜昌"]
]
function selectCity(){
var province = document.getElementById("sheng") //得到当前省份
// alert(province.value)
var cities = provinces[province.value] //城市列表
var citySelect = document.getElementById("city") //定位到 城市 select
citySelect.options.length = 0
for (var i = 0;i<cities.length;i ++) {
var citytext = cities[i] // 获取每一个城市
// alert(citytext)
var option1 = document.createElement("option")
var text = document.createTextNode(citytext)
option1.appendChild(text)
citySelect.appendChild(option1)
}
}
</script>
</head>
<body>
籍贯：
<select id="sheng" onchange="selectCity()">
<option selected="selected">请选择</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">湖北省</option>
</select>
<select id="city">
</select>
</body>
</html>