html部分:
js部分:
let province = ["北京", "上海", "天津", "重慶", "河北", "山西", "內蒙古", "遼寧", "吉林", "黑龍江", "江蘇", "浙江", "安徽", "福建", "江西", "山東", "河南", "湖北", "湖南", "廣東", "廣西", "海南", "四川", "貴州", "雲南", "**", "陝西", "甘肅", "寧夏", "青海", "新疆", "香港", "澳門", "台灣"]
let cities = new array();
cities[0] = "東城,西城,崇文,宣武,朝陽,豐台,石景山,海淀,門頭溝,房山,通州,順義,昌平,大興,平谷,懷柔,密雲,延慶";
cities[1] = "黃浦,盧灣,徐匯,長寧,靜安,普陀,閘北,虹口,楊浦,閔行,寶山,嘉定,浦東,金山,松江,青浦,南匯,奉賢,崇明";
cities[2] = "和平,東麗,河東,西青,河西,津南,南開,北辰,河北,武清,紅撟,塘沽,漢沽,大港,寧河,靜海,寶坻,薊縣";
cities[3] = "萬州,涪陵,渝中,大渡口,江北,沙坪壩,九龍坡,南岸,北碚,萬盛,雙撟,渝北,巴南,黔江,長壽,綦江,潼南,銅梁,大足,榮昌,壁山,梁平,城口,豐都,墊江,武隆,忠縣,開縣,雲陽,奉節,巫山,巫溪,石柱,秀山,酉陽,彭水,江津,合川,永川,南川";
cities[4] = "石家莊,邯鄲,邢台,保定,張家口,承德,廊坊,唐山,秦皇島,滄州,衡水";
cities[5] = "太原,大同,陽泉,長治,晉城,朔州,呂梁,忻州,晉中,臨汾,運城";
cities[6] = "呼和浩特,包頭,烏海,赤峰,呼倫貝爾盟,阿拉善盟,哲裡木盟,興安盟,烏蘭察布盟,錫林郭勒盟,巴彥淖爾盟,伊克昭盟";
cities[7] = "瀋陽,大連,鞍山,撫順,本溪,丹東,錦州,營口,阜新,遼陽,盤錦,鐵嶺,朝陽,葫蘆島";
cities[8] = "長春,吉林,四平,遼源,通化,白山,松原,白城,延邊";
cities[9] = "哈爾濱,齊齊哈爾,牡丹江,佳木斯,大慶,綏化,鶴崗,雞西,黑河,雙鴨山,伊春,七台河,大興安嶺";
cities[10] = "南京,鎮江,蘇州,南通,揚州,鹽城,徐州,連雲港,常州,無錫,宿遷,泰州,淮安";
cities[11] = "杭州,寧波,溫州,嘉興,湖州,紹興,金華,衢州,舟山,台州,麗水";
cities[12] = "合肥,蕪湖,蚌埠,馬鞍山,淮北,銅陵,安慶,黃山,滁州,宿州,池州,淮南,巢湖,阜陽,六安,宣城,亳州";
cities[13] = "福州,廈門,莆田,三明,泉州,漳州,南平,龍巖,寧德";
cities[14] = "南昌市,景德鎮,九江,鷹潭,萍鄉,新餘,贛州,吉安,宜春,撫州,上饒";
cities[15] = "濟南,青島,淄博,棗莊,東營,煙台,濰坊,濟寧,泰安,威海,日照,萊蕪,臨沂,德州,聊城,濱州,菏澤";
cities[16] = "鄭州,開封,洛陽,平頂山,安陽,鶴壁,新鄉,焦作,濮陽,許昌,漯河,三門峽,南陽,商丘,信陽,周口,駐馬店,濟源";
cities[17] = "武漢,宜昌,荊州,襄樊,黃石,荊門,黃岡,**,恩施,潛江,天門,仙桃,隨州,咸寧,孝感,鄂州";
cities[18] = "長沙,常德,株洲,湘潭,衡陽,岳陽,邵陽,益陽,婁底,懷化,郴州,永州,湘西,張家界";
cities[19] = "廣州,深圳,珠海,汕頭,東莞,中山,佛山,韶關,江門,湛江,茂名,肇慶,惠州,梅州,汕尾,河源,陽江,清遠,潮州,揭陽,雲浮";
cities[20] = "南寧,柳州,桂林,梧州,北海,防城港,欽州,貴港,玉林,南寧地區,柳州地區,賀州,百色,河池";
cities[21] = "海口,三亞";
cities[22] = "成都,綿陽,德陽,自貢,攀枝花,廣元,內江,樂山,南充,宜賓,廣安,達川,雅安,眉山,甘孜,涼山,瀘州";
cities[23] = "貴陽,六盤水,遵義,安順,銅仁,黔西南,畢節,黔東南,黔南";
cities[24] = "昆明,大理,曲靖,玉溪,昭通,楚雄,紅河,文山,思茅,西雙版納,保山,德巨集,麗江,怒江,迪慶,臨滄";
cities[25] = "拉薩,日喀則,山南,林芝,昌都,阿里,那曲";
cities[26] = "西安,寶雞,咸陽,銅川,渭南,延安,榆林,漢中,安康,商洛";
cities[27] = "蘭州,嘉峪關,金昌,**,天水,酒泉,張掖,武威,定西,隴南,平涼,慶陽,臨夏,甘南";
cities[28] = "銀川,石嘴山,吳忠,固原";
cities[29] = "西寧,海東,海南,海北,黃南,玉樹,果洛,海西";
cities[30] = "烏魯木齊,石河子,克拉瑪依,伊犁,巴音郭勒,昌吉,克孜勒蘇柯爾克孜,博爾塔拉,吐魯番,哈密,喀什,和田,阿克蘇";
cities[31] = "香港";
cities[32] = "澳門";
cities[33] = "台北,高雄,臺中,台南,屏東,南投,雲林,新竹,彰化,苗栗,嘉義,花蓮,桃園,宜蘭,基隆,台東,金門,馬祖,澎湖";
//獲取select
let selele = document.getelementbyid("province");
let citele = document.getelementbyid("city");
//渲染省份和城市
//參1:省份或城市資料(陣列) 參2:新增的select
function renpro(f68, selele) `;
optele.value = `$`;
}}//渲染省份
renpro(province, selele);
//渲染城市
renpro(cities[0].split(","), citele);
//聯動事件
selele.addeventlistener("change", function() )
二級聯動 js
在html部分只寫兩個select標籤 option標籤將用js的方法寫入 onchange 內容發生改變事件 用於select下拉列表中後的內容發生改變時候的觸發 核心部分就是js裡面的內容 建立乙個物件data來儲存資料 data 首先通過for迴圈來新增第一級裡面的內容 province va...
二級選單聯動js
script src city.js script 建立文件片段,使用完後釋放 var flag document.createdocumentfragment 建立城市下拉框 var select document.createelement select 給城市下拉框乙個id select.id...
JS之省市二級聯動實現
步驟 第一步 確定事件 onchange 並為其繫結乙個函式 第二步 建立乙個二維陣列用於儲存省份和城市 第三步 獲取使用者選擇的省份 第四步 遍歷二維陣列中的省份 第五步 將遍歷的省份與使用者選擇的省份比較 第六步 如果相同,遍歷該省份下所有的城市 第七步 建立城市文字節點 第八步 建立optio...