案例五：省市联动

页面组成：两个下拉框

function add1(val)
1.遍历二维数组
2.得到也是一个数组
3.拿到数组中的一个值和传递过来的值做比较
4.如果相同，获取得到第一个值后面的元素
5.得到city的select
6.添加appendChild方法
创建option

由于每次都想要city里面的option
第二次添加，追加。每次添加添加之前判断一下city里面是否有option，如果有则删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="countryid" onchange="add1(this.value);">
    <option value="中国">中国</option>
    <option value="美国">美国</option>
    <option value="德国">德国</option>
    <option value="日本">日本</option>
</select>
<select id="cityid">

</select>
</body>
<script type="text/javascript">
    var arr = new Array(4);
    arr[0] = ["中国", "西安", "福州", "哈密", "成都"];
    arr[1] = ["美国", "华盛顿", "休斯顿", "纽约", "底特律"];
    arr[2] = ["德国", "慕尼黑", "柏林", "法兰克福", "狼堡"];
    arr[3] = ["日本", "东京", "北海道", "广岛", "长崎"]

    function add1(val) {

        var city1 = document.getElementById("cityid");
        var options1 = city1.getElementsByTagName("option");
        for(var m =0;m<options1.length;m++){
            var op = options1[m]
            city1.removeChild(op);
            m--;
        }

        for (var i = 0; i < arr.length; i++) {
            var arr1 = arr[i];
            var firstvalue = arr1[0];
            if (firstvalue == val) {
                for (var j = 1; j < arr1.length; j++) {
                    var value1 = arr1[j];
                    var option1 = document.createElement("option");
                    var text1 = document.createTextNode(value1);
                    option1.appendChild(text1);
                    city1.appendChild(option1);
                }
            }
        }
    }
</script>
</html>

案例五：省市联动

推荐阅读更多精彩内容