html练习题

<!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>