js中的数组应用小案例——省份城市的二级联动
主要利用js的数组方法及DOM编程实现下拉列表之间的二级联动
html文件：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>城市切换示例</title>
</head>
<body>
<form>
<select id="province"></select>
<select id="city"></select>
</form>
<script src="js/array.js" charset="UTF-8"></script>
</body>
</html>array.js文件：
window.onload=function(){
//创建省份
createProvinces();
//选择省份后，切换对应城市列表
province.onchange=createCities;
}
//声明省份数组
var provinces=["请选择","上海","江苏","浙江","福建"];
//声明城市数组
var cities=[
[],
["黄浦区","静安区","长宁区","浦东区"],
["苏州市","南京市","扬州市"],
["杭州市","温州市","宁波市"],
["厦门市","福州市"]
];
//声明获取的省份节点元素
var province=document.getElementById("province");
//声明获取的城市节点元素
var city=document.getElementById("city");
function createProvinces(){
for(var i in provinces){
//获取下拉列表集合实例
var op=new Option(provinces[i],provinces[i]);
//将下拉列表各元素添加到省份元素中
province.options.add(op);
}
}
function createCities(){
//获取省份选中项的索引
var index=province.selectedIndex;
//将city下的所有原有option移除
city.options.length=0;
//添加对应城市下拉列表
for(var i in cities[index]){
var op=new Option(cities[index][i],cities[index][i]);
city.options.add(op);
}
}声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： PDO实现用户数据的增删改查
- 下一篇： php读文件——将服务端的文件读出来显示在web页面
