js實現級聯菜單（沒有后台）

html代碼：

<!-- js級聯菜單 -->
<div id="cascMenu">
    <select id="select" onchange="getLocal(this.selectedIndex)">
        <option>請選擇</option><!-- selectedIndex=0 -->
        <option>北京</option><!-- selectedIndex=1 -->
        <option>上海</option>
        <option>廣州</option>
    </select>
    <select id="selectInfo">
        <option>請選擇</option>
    </select>
<div>

 

js代碼：

function getLocal(selectIndex){
    var arr=new Array();
    arr[0]=[new Option("請選擇","1")];
    arr[1]=[new Option("東城區","1"),new Option("西城區","2"),new Option("朝陽區","3")];
    arr[2]=[new Option("黃埔區","1"),new Option("其他區","2")];
    arr[3]=[new Option("海珠區","1"),new Option("天河區","2"),new Option("白雲區","3"),new Option("黃浦區","3")];
    var selectInfo=document.getElementById("selectInfo");
    selectInfo.innerHTML="";
　　//為子下拉列表添加內容
    for(var i=0;i<arr[selectIndex].length;i++){
        selectInfo.options[i]=arr[selectIndex][i];
    }
}