js中的数组应用小案例——省份城市的二级联动

最新推荐文章于 2022-06-30 17:29:41 发布

bboyjoe

最新推荐文章于 2022-06-30 17:29:41 发布

阅读量3.4k

点赞数

分类专栏： javascript 文章标签： javascript 数组

本文链接：https://blog.csdn.net/bboyjoe/article/details/49708193

版权

javascript 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

主要利用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.οnlοad=function(){
  //创建省份
    createProvinces();
     //选择省份后，切换对应城市列表
    province.οnchange=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);
    }
}