1 <select name="" id="a">
 2         <option value="">guangdong</option>
 3         <option value="">shenzhen</option>
 4         <option value="">shanghai</option>
 5         <option value="">beijing</option>
 6     </select>
 7     <select 
 
id="b">
 8         <option value="">tianhe</option>
 9         <option value="">haizhu</option>
10         <option value="">yuexiu</option>
11     </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>

簡單的菜單聯動