js 下拉列表 省 市 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt
js 下拉列表 省 市
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script type="text/javascript"> //好像不是這樣子 var arr_province = ["請選擇省/城市","北京市","上海市","天津市","重慶市","深圳市","廣東省","河南省"]; var arr_city = [ ["請選擇城市/地區"], ["東城區","西城區","朝陽區","宣武區","昌平區","大興區","丰台區","海澱區"], ['寶山區','長寧區','豐賢區', '虹口區','黃浦區','青浦區','南匯區','徐匯區','盧灣區'], ['和平區', '河西區', '南開區', '河北區', '河東區', '紅橋區', '塘古區', '開發區'], ['俞中區', '南岸區', '江北區', '沙坪壩區', '九龍坡區', '渝北區', '大渡口區', '北碚區'], ['福田區', '羅湖區', '鹽田區', '寶安區', '龍崗區', '南山區', '深圳周邊'], ['廣州市','惠州市','汕頭市','珠海市','佛山市','中山市','東莞市'], ['鄭州市'] ]; //函數：當省份中的option改變時，城市中的數據應該相應的改變 function select_change(index) { var city = document.form1.city; //根據當前index確定city中要寫入的二維數組是哪一個 city.length = 0; city.length = arr_city[index].length; for(var i=0;i<arr_city[index].length;i++) { //創建每一個option對象(option標記) city.options[i].text = arr_city[index][i]; city.options[i].value = arr_city[index][i]; } } //函數：給province對象添加option對象，每個option的內容來自於arr_province function init() { //獲取province和city對象 var province = document.form1.province; var city = document.form1.city; //指定下拉列表的高度，準備寫入幾個option的標記(很重要) province.length = arr_province.length; //這句必須有 //迴圈數組，將數組內容寫入到province中去 for(var i=0;i<arr_province.length;i++) { //創建每一個option對象(option標記) province.options[i].text = arr_province[i]; province.options[i].value = arr_province[i]; } //指定省份當前的預設選中索引號 var index = 0; province.selectedIndex = index; //對象city的內容來自於province的選擇 //我們預設指定一個option，一般是下標為0的那個 city.length = arr_city[index].length; for(var j=0;j<arr_city[index].length;j++) { //創建每一個option對象(option標記) city.options[j].text = arr_city[index][j]; city.options[j].value = arr_city[index][j]; } } </script> </head> <body onload="init()"> <form name="form1"> 省份：<select name="province" onchange="select_change(this.selectedIndex)" style="width:130px;"></select> 城市：<select name="city"></select> </form> </body> </html>
