在head 下写
</head>
<script type="text/javascript">
function addProvince() {
var prov = document.getElementById("province");
//省份
var provs = ["河南", "河北", "山西", "新疆"];
prov.length = 0;
for (var i = 0; i < provs.length; i++) {
var op = document.createElement("option");
op.value = provs[i];
op.innerHTML = provs[i];
prov.appendChild(op);
}
addCity();
}
function addCity() {
var city = document.getElementById("city");
var cities = [
["哈尔滨市","齐齐哈尔市","牡丹江市"]
["郑州市", "洛阳市", "开封市", "南阳市"],
["石家庄市", "邯郸市", "保定市"],
["太原市", "大同市", "晋城市", "运城市"],
["乌鲁木齐市", "吐鲁番地区", "哈密", "昌吉"]
];
var provIndex = document.getElementById("province").selectedIndex;
city.length = 0;
for (var i = 0; i < cities[provIndex].length; i++) {
var op = document.createElement("option");
op.value = cities[provIndex][i];
op.innerHTML = cities[provIndex][i];
city.appendChild(op);
}
}
</script>
在body 里面写
<body onload="addProvince();addOption();changeOption()">
<center>
<form method="post">
省份:<select id="province" onchange="addCity()">
</select>
城市:<select id="city">
</select>
</form>
</center>
</body>
效果如下: