<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AJAX案例--省份选择</title>
<style>
select {
width: 150px;
height: 50px;
background: #dcc2da;
}
select > option {
width: 150px;
padding: 5px;
background: #b3b0b3;
}
</style>
</head>
<body>
<select name="province" id="province">
<option>请选择</option>
<option>山东省</option>
<option>辽宁省</option>
<option>吉林省</option>
<option>传奇</option>
</select>
<select id="city">
<option>请选择</option>
</select>
<script>
var pro=document.querySelector("#province");
pro.onchange=function(){
var city=document.querySelector("#city");
// var opts=city.getElementsByTagName("option");
// for(var i=opts.length-1;i>0;i--){
// city.removeChild(opts[i]);
// }
city.innerHTM="";
var proValue = document.querySelector("#province").value;
var cities=[];
switch (proValue){
case "山东省":
cities = ["青岛市","济南市","威海市","日照市","德州市"];
break;
case "吉林省":
cities = ["长春市","松原市","吉林市","通化市","四平市"];
break;
case "辽宁省":
cities = ["沈阳市","大连市","铁岭市","丹东市","锦州市"];
break;
case "传奇":
cities = ["比奇","盟重","沙巴克","白日门","猪洞"];
break;
}
/*老师原来写的*/
// for(var j= 0,len=cities.length;j<len;j++){
// var opt=document.createElement("option");
// var textNode=document.createTextNode(cities[j]);
// opt.appendChild(textNode);
// city.appendChild(opt);
// }
/*javascript操作dom是一个很耗性能的过程,在某些情况下,不得不进行dom循环操作,
我们每次对dom的操作都会触发"重排",这严重影响到能耗,
一般通常采取的做法是尽可能的减少dom操作来减少"重排"。
面对循环操作dom的过程,我们选择使用文档碎片(creatDocumentFragment),
将需要添加到dom中的内容一次性添加到文档碎片中,然后将文档碎片添加到dom树,
这样就可以有效的减少操作dom的次数。
*/
/*我优化一下*/
var temp=document.createDocumentFragment();/*文档碎片(当把文档碎片附给某节点时,只是把文档碎片中的子节点附给了某节点,它本身并没有插入到这个节点中)*/
for(var j= 0,len=cities.length;j<len;j++){
var opt=document.createElement("option");//创建一个节点
opt.innerHTML=cities[j];//给节点添加内容
temp.appendChild(opt);//把创建的节点插入到temp文档中
}
city.appendChild(temp);//把temp文档插入到city当中
/*总结一下,循环创建元素节点追加到文档碎片中, 循环完毕后将文档碎片追加到目标元素内!多次创建 一次更新,只更新了1次DOM*/
}
</script>
</body>
</html>