Web小练习-简单的二级联动

最新推荐文章于 2019-12-04 23:28:57 发布

Oliver_W

最新推荐文章于 2019-12-04 23:28:57 发布

阅读量891

点赞数 1

分类专栏： web 文章标签： web 函数

本文链接：https://blog.csdn.net/Oliver_W/article/details/75042990

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一个简单的二级联动习题

这里写图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo2</title>
    <script>
        window.onload=function(){
            //定义省份的字符串
            var provincesArr=["湖南","湖北","广东"];
            //定义城市的字符串
            var citiesArr=["长沙,株洲,湘潭,常德,益阳,张家界","武汉,宜昌,恩施,黄石,襄樊,荆州","广州,珠海,佛山,东莞,惠州,深圳"];
            var provinces=document.getElementById("provinces");
            var cities=document.getElementById("cities");
            //给省份下拉列表框添加option
            for(var i=0;i<provincesArr.length;i++){
                var op=document.createElement("option");
                op.value=i;
                op.innerHTML=provincesArr[i];
                provinces.appendChild(op);
            }
            //选择省份后，城市列表框联动
            provinces.onchange=function(){
                var index=this.value;
                cities.options.length=1;
                if(citiesArr[index]==null){
                    return;
                }
                var secondCitiesArr=citiesArr[index].split(",");
                for(var i=0;i<secondCitiesArr.length;i++){
                    var op=document.createElement("option");
                    op.innerHTML=secondCitiesArr[i];
                    cities.appendChild(op);
                }
            }
        }
    </script>
</head>
<body>
<h2>选择所在的省份及城市</h2>
省份：<select id="provinces">
    <option>--请选择--</option>
</select>
城市：<select id="cities">
    <option>--请选择--</option>
</select>
</body>
</html>