前端 原生js 省市級聯選單 有效哦

2021-10-07 17:16:10 字數 4001 閱讀 2078

來個省市級聯選單(二級聯動 ),方便自己後期複製貼上 。若是能幫助有需要的夥伴,那再好不過。

沒有樣式 ,需要的拿走不謝。

所在地區:

請選擇省份

城市:請選擇城市

js檔案 :

var provinces = ['請選擇省份','北京市','上海市','天津市','重慶市','河北省','山西省','內蒙古省','遼寧省','吉林省','黑龍江省','江蘇省','浙江省','安徽省','福建省','江西省','山東省','河南省','湖北省','湖南省','廣東省','廣西省','海南省','四川省','貴州省','雲南省','**省','陝西省','甘肅省','寧夏省','青海省','新疆省','香港','澳門','台灣'];

var citys = [['請選擇城市'],

["東城區", "西城區", "崇文區", "宣武區", "朝陽區", "豐台區", "石景山區", "海淀區", "門頭溝區", "房山區", "通州區", "順義區", "昌平區", "大興區", "懷柔區", "平谷區", "密雲縣", "延慶縣"],

["黃浦區", "盧灣區", "徐匯區", "長寧區", "靜安區", "普陀區", "虹口區", "楊浦區", "閔行區", "寶山區", "嘉定區", "浦東新區", "金山區", "松江區", "青浦區", "南匯區", "奉賢區", "崇明縣"],

["和平區", "河東區", "河西區", "南開區", "河北區", "紅橋區", "塘沽區", "漢沽區", "大港區", "東麗區", "西青區", "津南區", "北辰區", "武清區", "寶坻區", "寧河縣", "靜海縣", "薊縣"],

["萬州區", "涪陵區", "渝中區", "大渡口區", "江北區", "沙坪壩區", "九龍坡區", "南岸區", "北碚區", "萬盛區", "雙橋區", "渝北區", "巴南區", "黔江區", "長壽區", "綦江縣", "潼南縣", "銅梁縣", "大足縣", "榮昌縣", "璧山縣", "梁平縣", "城口縣", "豐都縣", "墊江縣", "武隆縣", "忠縣", "開縣", "雲陽縣", "奉節縣", "巫山縣", "巫溪縣", "石柱土家族自治縣", "秀山土家族苗族自治縣", "酉陽土家族苗族自治縣", "彭水苗族土家族自治縣", "江津市", "合川市", "永川市", "南川市"],

["石家莊市","張家口市","承德市","秦皇島市","唐山市","廊坊市","保定市","衡水市","滄州市","邢台市","邯鄲市"],

["太原市","朔州市","大同市","陽泉市","長治市","晉城市","忻州市","晉中市","臨汾市","呂梁市","運城市"],

["呼和浩特市","包頭市","烏海市","赤峰市","通遼市","呼倫貝爾市","鄂爾多斯市","烏蘭察布市","巴彥淖爾市","興安盟","錫林郭勒盟","阿拉善盟"],

["瀋陽市","朝陽市","阜新市","鐵嶺市","撫順市","本溪市","遼陽市","鞍山市","丹東市","大連市","營口市","盤錦市","錦州市","葫蘆島市"],

["長春市","白城市","松原市","吉林市","四平市","遼源市","通化市","白山市","延邊州"],

["哈爾濱市","齊齊哈爾市","七台河市","黑河市","大慶市","鶴崗市","伊春市","佳木斯市","雙鴨山市","雞西市","牡丹江市","綏化市","大興安嶺地區"],

["南京市","徐州市","連雲港市","宿遷市","淮安市","鹽城市","揚州市","泰州市","南通市","鎮江市","常州市","無錫市","蘇州市"],

["杭州市","湖州市","嘉興市","舟山市","寧波市","紹興市","衢州市","金華市","台州市","溫州市","麗水市"],

["合肥市","宿州市","淮北市","亳州市","阜陽市","蚌埠市","淮南市","滁州市","馬鞍山市","蕪湖市","銅陵市","安慶市","黃山市","六安市","巢湖市","池州市","宣城市"],

["福州市","南平市","莆田市","三明市","泉州市","廈門市","漳州市","龍巖市","寧德市"],

["南昌市","九江市","景德鎮市","鷹潭市","新余市","萍鄉市","贛州市","上饒市","撫州市","宜春市","吉安市"],

["濟南市","青島市","聊城市","德州市","東營市","淄博市","濰坊市","煙台市","威海市","日照市","臨沂市","棗莊市","濟寧市","泰安市","萊蕪市","濱州市","菏澤市"],

["鄭州市","開封市","三門峽市","洛陽市","焦作市","新鄉市","鶴壁市","安陽市","濮陽市","商丘市","許昌市","漯河市","平頂山市","南陽市","信陽市","周口市","駐馬店市","濟源市"],

["武漢市","**市","襄樊市","荊門市","孝感市","黃岡市","鄂州市","黃石市","咸寧市","荊州市","宜昌市","隨州市","省直轄縣級行政單位","恩施州"],

["長沙市","張家界市","常德市","益陽市","岳陽市","株洲市","湘潭市","衡陽市","郴州市","永州市","邵陽市","懷化市","婁底市","湘西州"],

["廣州市","深圳市","清遠市","韶關市","河源市","梅州市","潮州市","汕頭市","揭陽市","汕尾市","惠州市","東莞市","珠海市","中山市","江門市","佛山市","肇慶市","雲浮市","陽江市","茂名市","湛江市"],

["南寧市","桂林市","柳州市","梧州市","貴港市","玉林市","欽州市","北海市","防城港市","崇左市","百色市","河池市","來賓市","賀州市"],

["海口市","三亞市","省直轄縣級行政單位"],

["成都市","廣元市","綿陽市","德陽市","南充市","廣安市","遂寧市","內江市","樂山市","自貢市","瀘州市","宜賓市","攀枝花市","巴中市","達州市","資陽市","眉山市","雅安市","阿壩州","甘孜州","涼山州"],

["貴陽市","六盤水市","遵義市","安順市","畢節地區","銅仁地區","黔東南州","黔南州","黔西南州"],

["昆明市","曲靖市","玉溪市","保山市","昭通市","麗江市","思茅市","臨滄市","德巨集州","怒江州","迪慶州","大理州","楚雄州","紅河州","文山州","西雙版納州"],

["拉薩市","那曲地區","昌都地區","林芝地區","山南地區","日喀則地區","阿里地區"],

["西安市","延安市","銅川市","渭南市","咸陽市","寶雞市","漢中市","榆林市","安康市","商洛市"],

["蘭州市","嘉峪關市","**市","天水市","武威市","酒泉市","張掖市","慶陽市","平涼市","定西市","隴南市","臨夏州","甘南州"],

["西寧市","海東地區","海北州","海南州","黃南州","果洛州","玉樹州","海西州"],

["銀川市","石嘴山市","吳忠市","固原市","中衛市"],

["烏魯木齊市","克拉瑪依市","自治區直轄縣級行政單位","喀什地區","阿克蘇地區","和田地區","吐魯番地區","哈密地區","克孜勒蘇柯州","博爾塔拉州","昌吉州","巴音郭楞州","伊犁州","塔城地區","阿勒泰地區"],

["香港"],

["澳門"],

["台北市","高雄市","台中市","花蓮市","基隆市","嘉義市","金門市","連江市","苗栗市","南投市","澎湖市","屏東市","台東市","台南市","桃園市","新竹市","宜蘭市","雲林市","彰化市"]];

window.onload = function()

function init(){

// 注意這裡是要通過 id 獲取元素

var province = document.getelementbyid('param_province');

province.length=provinces.length;

for(var i=0;i效果圖:

JS省市級聯

請選擇國家 中國 下面是provinceandcity.js頁面的內容 js聯動效果 province 省份類 function provincelist city 城市類 function citylist 建立provincelist citylist類例項 var provinceob new...

Js省市級聯動案例

doctype html utf 8 省市級聯動案例 title head 頁面中有兩個下拉框,分別為省份 城市 區縣 使用者選擇某個省份,對應城市下拉框重要出現所有該省份的城市,選擇城市後出來對應該城市的區或縣 getindex this 請選擇省份 option select areametho...

動態的省市級聯

aligins none block 所屬地區 請選擇 請選擇 請選擇 請選擇 請選擇 先查一級 public listfindonearea long parentid 再查二級 public listfindchildsarea long id 實體類 private static final ...