onchange 事件会在域的内容改变时发生。
<body>
<select name="" id="s1">
<option value="">请选择省份/直辖市</option>
<option value="河北">河北省</option>
<option value="山东">山东省</option>
<option value="天津">天津市</option>
</select>
<select name="" id="s2">
<option value="">请选择城市</option>
</select>
<script type="text/javascript">
//获取省份下拉列表
var s1 = document.getElementById("s1");
//获取城市下拉列表
var s2 = document.getElementById("s2");
//定义城市数组
var arr = [
[],
["沧州市", "承德市", "石家庄市", "秦皇岛市", "唐山市"],
["菏泽市", "济宁市", "青岛市", "济南市"],
["津南区", "西青区", "滨海新区"]
];
// 验证s1长度
// console.log(s1.length);
//改变省份下拉列表内容触发
s1.onchange = function() {
//每次触发将，s2的长度设为1，即清空城市内容
s2.length = 1;
//select的下标
var x = this.selectedIndex;
// 验证是否能获取到
console.log(this.value)
console.log(this.selectedIndex);
console.log("arr["+x+"].length="+arr[x].length);
// for循环创建并向s2添加内容
for (var i = 0; i < arr[x].length; i++) {
//创建城市下拉列表内容
var op = document.createElement("option");
//给城市下拉列表内容赋值
op.value = arr[x][i];
op.innerHTML = arr[x][i];
//添加到城市下拉列表
s2.appendChild(op);
}
console.log("s2=" + s2.length);
}
</script>
</body>
1163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
