html5 学习日记最简单适合初学者的省市级联下拉菜单

省市级联下拉菜单（可拓展为其他级联）

由于JavaScript中的数组支持中文下标，因此可以利用二维数组实现省市级联或其他级联
页面中添加两个<select>下拉菜单，然后通过<script>建立一个数组。
在数组中第一级脚标为省份，然后第二级为城市名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="citys" id="citys" onchange="addcity()">
    <option value="-1" >-- 请选择省份 --</option>
</select>
<select name="city" id="city" onchange="">
    <option value="">-- 请选择城市 --</option>
</select>
</body>
<script>
    var citys=new Array();
    citys["山东省"]=["青岛市","济南市","烟台市"];
    citys["湖北省"]=["武汉市","宜昌市","黄冈市"];
    function addsf(){
        var sf=document.getElementById("citys");
        for(var i in citys){
            var op = new Option(i,i);
            sf.add(op);
        }
    }
    addsf();//此处也可以在<body>中用onload方式添加
    function addcity(){//添加城市选单中的城市
        var sf=document.getElementById("citys").value;//获取省份列表中选择的值
        var c=citys[sf];//根据省份列表选择的值将第二维数组提出
        var city=document.getElementById("city");//通过id获取<option>
        city.options.length=1;//此处为了防止每次选择都会无限的在下拉菜单中添加城市
        for(var i in c){//循环添加选项
            var op = new Option(c[i],c[i]);
            city.add(op);
        }
    }
</script>
</html>

在<scrip>中function addcity方法中的“city.options.length=1;”这句是为了清除每次选择省份都加载的城市
如果没有这句话执行结果会造成在多次选择不同省份后城市选项中添加了大量的无关城市，原因是选择省份后没有刷新页面，city.add(op)会一直添加城市。
再多次选择山东省和湖北省之后就会出现下面的情况。
在这里插入图片描述
所以要用这句话在每次选择省份时清除上一次选择的结果，length=1是为了保留原始写在<body>中的<option>。