简单的菜单联动

<select name="" id="a">
        <option value="">guangdong</option>
        <option value="">shenzhen</option>
        <option value="">shanghai</option>
        <option value="">beijing</option>
    </select>
    <select id="b">
        <option value="">tianhe</option>
        <option value="">haizhu</option>
        <option value="">yuexiu</option>
    </select>

<script>

        var a = document.querySelector("#a");
        var b = document.querySelector("#b");
        var pro = a.children;
        var arr =[
            ["tianhe","haizhu","yuexiu"],
            ["nanshan","futian","longgang"],
            ["pudong","puxi","c"],
            ["chaoyang","haiding","c"]
        ]
        for(var i=0;i<pro.length;i++){
            a.onchange=function(){
                console.log(a.selectedIndex);
                // 打印select元素被选的索引值
                b.innerHTML="";
                // 为了让每次选择之后,只显示对应数组的值,需要将二级的目录清空
                for (var i=0;i<arr.length-1;i++) {
                var str = document.createElement("option");
                    str.innerHTML=arr[a.selectedIndex][i];
                    // 获取被选索引值对应的数组的每一项值
                    console.log(b.children.length)
                    b.appendChild(str);
                }
            }
        }
    </script>