html代码
<select id="s1">
<option value="0">~请选择省份~</option>
<option value="1">湖北省</option>
<option value="2">江西省</option>
</select>
<select name="" id="city">
<option value="0">~请选择城市~</option>
</select>
js代码
window.onload = function () {
//创建一个二维数组，存储城市
var arrcity = [["~请选择城市~"],[ "武汉市", "黄冈市", "襄阳市"], ["南昌市", "景德镇", "九江市"]];
//给省份绑定onchange时间
s1.onchange = function () {
//1.获取你选择省份的value属性
var val = document.getelementbyid("s1").value;
//7.获取城市的元素节点
var city = document.getelementbyid("city");
//9.每次触发onchang时间后将清空第二个下拉框的option内容
city.innerhtml = "";
//2.遍历二维数组中的省份
for (var i = 0; i < arrcity.length; i++) {
//注意，比较的是角标
if(val == i){
//3.遍历选择省份下的城市
for(var j=0;j<arrcity[i].length;j++){
//4.添加option元素节点
var option = document.createelement("option");
//5.添加文本节点
var textnode = document.createtextnode(arrcity[i][j]);
//6.将文本节点添加到option元素节点中
option.appendchild(textnode);
//8.将元素节点添加到城市的元素节点下
city.appendchild(option);
}
}
}
}
}
