<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联动菜单</title>
<script>
//模拟查询所有的城市
function loadCities(){
return [
["杭州","宁波","温州"],
["济南","青岛","烟台"],
["石家庄","保定","唐山"],
];
}
var cities;
//页面加载后自动查询所有城市
//onload是页面加载事件,浏览器加载完页面后自动出发
window.onload = function(){
//此处代码在页面加载后执行
cities = loadCities();
}
function chg(){
//获取下拉选
var s1= document.getElementById("province");
//获取选中的省份的序号(value)
var pindex = s1.value;
//根据省份序号获取对应城市
var pcities = cities[pindex];
console.log(pcities);
//删除原来的城市,创建并追加新的城市
var s2 = document.getElementById("city");
//此方法也可以删除原来的城市
// var options= s2.getElementsByTagName("option");
// for(var i=option.length;i>0;i--){
// s2.removeChild(option[i]);
// }
s2.innerHTML="<option>请选择</option>";//初始化option
//创建并追加新的城市
if(pcities){
for(var i=0;i<pcities.length;i++){
var opn=document.createElement("option");
opn.innerHTML=pcities[i];
s2.appendChild(opn);
}
}
}
</script>
</head>
<body>
省:<!-- onchange只有事件改变的时候触发 -->
<select οnchange="chg();" id="province">
<option value="-1">请选择</option>
<option value="0">浙江省</option>
<option value="1">山东省</option>
<option value="2">河北省</option>
</select>
市:
<select id="city">
<option>请选择</option>
<option></option>
<option></option>
<option></option>
</select>
</body>
</html>