本文實(shí)例講述了js實(shí)現(xiàn)全國(guó)省市二級(jí)聯(lián)動(dòng)下拉選擇菜單，分享給大家供大家參考。具體如下：
效果圖：
具體代碼：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無(wú)標(biāo)題文檔</title><script type="text/javascript">//好像不是這樣子var arr_province = ["請(qǐng)選擇省/城市","北京市","上海市","天津市","重慶市","深圳市","廣東省","河南省"];var arr_city = [ ["請(qǐng)選擇城市/地區(qū)"], ["東城區(qū)","西城區(qū)","朝陽(yáng)區(qū)","宣武區(qū)","昌平區(qū)","大興區(qū)","豐臺(tái)區(qū)","海淀區(qū)"], ['寶山區(qū)','長(zhǎng)寧區(qū)','豐賢區(qū)', '虹口區(qū)','黃浦區(qū)','青浦區(qū)','南匯區(qū)','徐匯區(qū)','盧灣區(qū)'], ['和平區(qū)', '河西區(qū)', '南開(kāi)區(qū)', '河北區(qū)', '河?xùn)|區(qū)', '紅橋區(qū)', '塘古區(qū)', '開(kāi)發(fā)區(qū)'], ['俞中區(qū)', '南岸區(qū)', '江北區(qū)', '沙坪壩區(qū)', '九龍坡區(qū)', '渝北區(qū)', '大渡口區(qū)', '北碚區(qū)'], ['福田區(qū)', '羅湖區(qū)', '鹽田區(qū)', '寶安區(qū)', '龍崗區(qū)', '南山區(qū)', '深圳周邊'], ['廣州市','惠州市','汕頭市','珠海市','佛山市','中山市','東莞市'], ['鄭州市'] ];//函數(shù)：當(dāng)省份中的option改變時(shí)，城市中的數(shù)據(jù)應(yīng)該相應(yīng)的改變function select_change(index){ var city = document.form1.city; //根據(jù)當(dāng)前index確定city中要寫(xiě)入的二維數(shù)組是哪一個(gè) city.length = 0; city.length = arr_city[index].length; for(var i=0;i<arr_city[index].length;i++) { //創(chuàng)建每一個(gè)option對(duì)象(option標(biāo)記) city.options[i].text = arr_city[index][i]; city.options[i].value = arr_city[index][i]; }}//函數(shù)：給province對(duì)象添加option對(duì)象，每個(gè)option的內(nèi)容來(lái)自于arr_provincefunction init(){ //獲取province和city對(duì)象 var province = document.form1.province; var city = document.form1.city; //指定下拉列表的高度，準(zhǔn)備寫(xiě)入幾個(gè)option的標(biāo)記(很重要) province.length = arr_province.length; //這句必須有 //循環(huán)數(shù)組，將數(shù)組內(nèi)容寫(xiě)入到province中去 for(var i=0;i<arr_province.length;i++) { //創(chuàng)建每一個(gè)option對(duì)象(option標(biāo)記) province.options[i].text = arr_province[i]; province.options[i].value = arr_province[i]; } //指定省份當(dāng)前的默認(rèn)選中索引號(hào) var index = 0; province.selectedIndex = index; //對(duì)象city的內(nèi)容來(lái)自于province的選擇 //我們默認(rèn)指定一個(gè)option，一般是下標(biāo)為0的那個(gè) city.length = arr_city[index].length; for(var j=0;j<arr_city[index].length;j++) { //創(chuàng)建每一個(gè)option對(duì)象(option標(biāo)記) 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>希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
