案例：
参考代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city">
</select>
<select id="contry">
</select>
</form>
<script>
var provinceArr=['上海','江苏','河北'];//省份数组
var cityArr=[['上海市'],//城市数组
['江苏市','南京市','扬州市'],
['石家庄','秦皇岛','张家口']];
var contryArr=[//区域数组
[
['黄浦区','静安区','长宁区','浦东区']
],[
['虎丘区','吴中区','相城区']
],[
['长安区','板西区','新华区']
]
];
function createOption(obj,data){
for(var i in data){//增强for循环
var op=new Option(data[i],i);//创建循环对象赋值
obj.options.add(op);//添加选项，对象调用添加
}
}
var province=document.getElementById("province");
//获取第一个select的id
createOption(province,provinceArr);//调用方法
//传入对象和数值
var city=document.getElementById("city");
province.onchange=function(){
city.options.length=0;//清空city原有的下拉列表选项
createOption(city,cityArr[province.value]);//重新添加城市列表
if(province.value>=0){
city.onchange();//如果value值大于等于0就调动点击事件
}else{
contry.options.length=0;//未选择清零
}
};
var contry=document.getElementById("contry");
city.onchange=function(){
contry.options.length=0;//清空contry原有下的数据
createOption(contry,contryArr[province.value][city.value]);
};
</script>
</body>
</html>
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/52830.html