1. 程式人生 > >省份城市實現二級聯動效果

省份城市實現二級聯動效果

<script>

var citys = new Array();         //一個二維陣列,用於儲存省市,依次對應  
    citys[1]=new Array("濟南","青島","煙臺","濟寧","德州","萊蕪");  
    citys[2]=new Array("安慶","阜陽","合肥","馬鞍山","蕪湖");  
    citys[3]=new Array("北京");  
    citys[4]=new Array("福州","龍巖","寧德","莆田");  
    citys[5]=new Array("潮州","佛山","廣州");  
    function change(value){
     document.getElementById("city").options.length=0;
     for(
     var m =0 ;m<citys[value].length;m++){//如果使用者選擇了廣東,則會將5傳遞到 change() 方法裡,就會選擇city[5]={.......}, 迴圈取出裡面的城市
     var opt=document.createElement("option");//建立一個 <option></option> 標籤    
     var node=document.createTextNode(citys[value][m]+"");// 建立一個文字 文字內容就是 讀取出來的城市       等同於    潮州  
     opt.appendChild(node);//將文字新增到標籤裡等同於<option>潮州</option>  
     document.getElementById("city").appendChild(opt);//將<option>潮州</option>新增到下拉列表裡等同於<select class="se2" id="city"><option>潮州</option></select>  
     
          
    }
   }

</script>

省份:<select class="se1" id="province" onchange="change(this.value)" style="width: 170px; border: 2px solid black;" ><!--定義省份下拉列表-->        
            <option value="1">選擇省份</option>  
            <option value="2">安徽</option>  
            <option value="3">北京</option>  
            <option value="4">福建</option>  
            <option value="5">廣東</option>  
    </select> <br />
    城市:<select class="se2" id="city" style="width: 170px; border: 2px solid black;"><!--定義城市下拉列表-->  
            <option value="0">請選擇城市</option>          
    </select>