知识点:
1.createElement:创建元素
2.setAttribute:设置属性
3.appendChild:向节点添加最后一个子节点。
4.onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<style type="text/css">
.box{
width: 600px;
padding: 20px;
border: 2px solid red;
border-radius: 4px;
margin: 100px auto;
}
.box select{
width: 150px;
}
.box label{
margin: 0 20px;
}
</style>
<script type="text/javascript">
var provs = [{"id":"01","pName":"河南省"},{"id":"02","pName":"河北省"},{"id":"03","pName":"山西省"},{"id":"04","pName":"山东省"},{"id":"05","pName":"四川省"}];
var citys = [{"id":"001","cName":"安阳市","pId":"01"},{"id":"002","cName":"郑州市","pId":"01"},{"id":"003","cName":"新乡市","pId":"01"},{"id":"004","cName":"石家庄","pId":"02"},{"id":"005","cName":"邯郸","pId":"02"},{"id":"006","cName":"大同","pId":"03"},{"id":"007","cName":"太原","pId":"03"},{"id":"008","cName":"济南","pId":"04"},{"id":"009","cName":"青岛市","pId":"04"},{"id":"010","cName":"成都","pId":"05"},{"id":"011","cName":"绵阳市","pId":"05"}];
window.onload =function(){
//加载所有省份
var selProv=document.getElementById('province');
for(var i=0;i<provs.length;i++){
// 动态创建1个option标签的Dom对象
var optProv= document.createElement('option');
// 设置当前选项的value和 文本
optProv.setAttribute('value',provs[i].id);
optProv.innerHTML = provs[i].pName;
//把这个DOM对象,插入到当前DOM、树的合适位置。
selProv.appendChild(optProv);
}
//动态加载城市
var selCity = document.getElementById('city');
selProv.onchange =function(){
//seleCity.innerHTML = '';清空城市选项1
selCity.options.length =0;//清空城市选项2
var pId =this.value;//拿到所选省份的id
for(var i= 0;i<citys.length ;i++){
if(citys[i].pId==pId){
var optCity =document.createElement('option');
optCity.setAttribute('value',citys[i].id);
optCity.innerHTML = citys[i].cName;
selCity.appendChild(optCity);
}
}
}
}
</script>
</head>
<body>
<div class="box">
请选择你所在的城市:
<select id="province">
<option value="00">请选择</option>
</select><label for="provice">省</label>
<select id="city">
<option value="000">请选择</option>
</select><label for="provice">市</label>
</div>
</body>
</html>