<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--省份-->
<select id="sheng">
<option value="省份">省份</option>
<option value="河南省">河南省</option>
<option value="浙江省">浙江省</option>
</select>
<!--城市-->
<select id="city">
<option value="市区">市区</option>
</select>
</body>
</html>
<script type="text/javascript">
//1.获取标签
//2.定义变量
var arr1 = ["郑州市", "洛阳市", "驻马店市", "焦作市", "南阳市", "新乡市", "开封市", "漯河市", "濮阳市", "安阳市"];
var arr2 = ["杭州市", "金华市", "义乌市", "温州市", "绍兴市", "宁波市", "嘉兴市"];
//3.select的事件 onchange 也就是只有值变化 才会执行!
sheng.onchange = function(){
//方式1:简单暴力又好用
// city.innerHTML = "";//清空子标签内容
//方式2: city标签中的子标签是数组容器
// for(var i = 0; i < city.children.length; i++){
// city.children[i].remove();
// i--;
// }
// [1, 2, 3, 4, 5, 6]
//方式3:
var l = city.children.length;
for(var i = 0; i < l; i++){
city.children[0].remove();
}
//问题在于 i++一直在自增;
//city.children.length 这个值一直在减小!!
// firstElementChild 要保证,其不能为空!!
//注意 程序不允许 undefined.语法 也不允许null.语法
//只有真实有效的对象可以点语法操作!
//定义一数组 来接收应该显示的市区数组
var tempArray = ["市区"];
if(this.value == "河南省"){
tempArray = arr1;
}
if(this.value == "浙江省"){
tempArray = arr2;
}
//--------------------------------
for(var i = 0; i < tempArray.length; i++){
var option1 = document.createElement("option");
option1.innerHTML = tempArray[i];
option1.value = tempArray[i];
city.appendChild(option1);
}
console.log(tempArray);
}
</script>
运行结果:
1302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
