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

来源：互联网发布：高级量角器软件编辑：程序博客网时间：2024/05/21 17:32

一个简单的二级联动习题

这里写图片描述

代码如下：

<!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>

阅读全文

1 0