<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="province" id="province">
<option value="hn">河南</option>
<option value="hb">河北</option>
<option value="bj">北京</option>
</select>
<select name="city" id="city">
<option>郑州</option>
<option>洛阳</option>
<option>南阳</option>
</select>
</body>
<script>
var city = document.getElementById("city");
var province = document.getElementById("province");
province.onchange = function() {
var val = province.value;
if (val == "hn") {
city.innerHTML = "<option>郑州</option><option>洛阳</option><option>周口</option>";
} else if (val == "hb") {
city.innerHTML = "<option>石家庄</option><option>邯郸</option><option>保定</option>";
} else if (val == "bj") {
city.innerHTML = "<option>朝阳区</option><option>海淀区</option><option>东城区</option>";
}
}
</script>
</html>