省市二级联动练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<script>
let provinces=["四川","湖南","湖北"];
let cities=[["成都","绵阳","双流"],["长沙","怀化"],["武汉","孝感"]];
window.onload=function () {
let province=document.getElementById("province");
let city=document.getElementById("city");
for (let i=0;i<provinces.length;i++){
let option=document.createElement("option");
option.setAttribute("value",""+i);
option.innerHTML=provinces[i];
province.appendChild(option);
}
province.onchange=function () {
let index=province.value;
city.innerHTML="";
for(let i=0;i<cities.length;i++){
let option=document.createElement("option");
option.setAttribute("value",""+i);
option.innerHTML=cities[index][i];
city.appendChild(option);
}
}
}
</script>
</head>
<body>
<span>省:</span><select id="province">
<option value="">--请选择--</option>
</select>
<span>市:</span><select id="city">
<option value="">--请选择--</option>
</select>
</body>
</html>