jquery 实现省市二级联动
生活随笔
收集整理的這篇文章主要介紹了
jquery 实现省市二级联动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?效果：
源碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格動態添加數據</title><script src="jquery-3.3.1.js"></script> </head> <body> <style>.area{width: 400px;margin: 100px auto;} </style> <script type="text/javascript">var CITYS = { "北京": ["北京"], "上海": ["上海"], "天津": ["天津", "塘沽"], "重慶": ["重慶", "涪陵", "江津", "巫山"], "河北": ["石家莊", "張家口", "承德", "秦皇島", "唐山", "廊坊", "保定", "滄州", "衡水", "邢臺", "邯鄲", "張北", "蔚縣", "豐寧", "圍場", "懷來", "遵化", "青龍", "壩縣", "樂亭", "饒陽", "黃驊", "南宮"], "山西": ["太原", "大同", "朔州", "陽泉", "長治", "晉城", "忻州", "晉中", "臨汾", "運城", "呂梁", "右玉", "河曲", "五臺山", "五寨", "興縣", "原平", "離石", "榆社", "隰縣", "介休", "候馬", "陽城"], "內蒙古": ["呼和浩特", "包頭", "烏海", "赤峰", "通遼", "呼倫貝爾", "鄂爾多斯", "烏蘭察布", "巴彥淖爾", "興安盟", "錫林郭勒盟", "阿拉善盟", "額爾古納右旗", "圖里河", "滿州里", "海拉爾", "小二溝", "新巴爾虎右旗", "新巴爾虎左旗", "博克圖", "扎蘭屯", "科前旗阿爾山", "索輪", "烏蘭浩特", "東烏珠穆沁旗", "額濟納旗", "拐子湖", "巴音毛道", "阿拉善右旗", "二連浩特", "那仁寶力格", "滿都拉", "阿巴嘎旗", "蘇尼特左旗", "海力素", "朱日和", "烏拉特中旗", "百靈廟", "四子王旗", "化德", "集寧", "吉蘭太", "臨河", "鄂托克旗", "東勝", "伊金霍洛旗", "阿拉善左旗", "西烏珠穆沁旗", "扎魯特旗", "巴林左旗", "錫林浩特", "林西", "開魯", "多倫", "翁牛特旗", "寶國圖"], "遼寧": ["沈陽", "朝陽", "阜新", "鐵嶺", "撫順", "本溪", "遼陽", "鞍山", "丹東", "大連", "營口", "盤錦", "錦州", "葫蘆島", "彰武", "開原", "清原", "葉柏壽", "新民", "黑山", "章黨", "桓仁", "綏中", "興城", "岫巖", "寬甸", "瓦房店", "莊河"], "吉林": ["長春", "白城", "松原", "吉林", "四平", "遼源", "通化", "白山", "延吉", "乾安", "前郭爾羅斯", "通榆", "長嶺", "三岔河", "雙遼", "蛟河", "敦化", "汪清", "梅河口", "樺甸", "靖宇", "東崗", "松江", "臨江", "集安", "長白"], "黑龍江": ["哈爾濱", "齊齊哈爾", "黑河", "大慶", "伊春", "鶴崗", "佳木斯", "雙鴨山", "七臺河", "雞西", "牡丹江", "綏化", "大興安嶺", "漠河", "塔河", "新林", "呼瑪", "嫩江", "孫吳", "北安", "克山", "富裕", "海倫", "明水", "富錦", "泰來", "安達", "鐵力", "依蘭", "寶清", "肇州", "通河", "尚志", "虎林", "綏芬河"], "江蘇": ["南京", "徐州", "連云港", "宿遷", "淮安", "鹽城", "揚州", "泰州", "南通", "鎮江", "常州", "無錫", "蘇州", "贛榆", "盱眙", "淮陰", "射陽", "高郵", "東臺", "呂泗", "溧陽", "吳縣東山"], "浙江": ["杭州", "湖州", "嘉興", "舟山", "寧波", "紹興", "衢州", "金華", "臺州", "溫州", "麗水", "平湖", "慈溪", "嵊泗", "定海", "嵊縣", "鄞縣", "龍泉", "洪家", "玉環"], "安徽": ["合肥", "宿州", "淮北", "阜陽", "亳州", "蚌埠", "淮南", "滁州", "馬鞍山", "蕪湖", "銅陵", "安慶", "黃山", "六安", "巢湖", "池州", "宣城", "碭山", "宿縣", "壽縣", "霍山", "桐城", "蕪湖縣", "寧國", "屯溪"], "福建": ["福州", "南平", "三明", "莆田", "泉州", "廈門", "漳州", "龍巖", "寧德", "邵武", "武夷山市", "浦城", "建甌", "福鼎", "泰寧", "長汀", "上杭", "永安", "屏南", "平潭", "崇武", "東山"], "江西": ["南昌", "九江", "景德鎮", "鷹潭", "新余", "萍鄉", "贛州", "上饒", "撫州", "宜春", "吉安", "修水", "寧岡", "遂川", "廬山", "波陽", "樟樹", "貴溪", "玉山", "南城", "廣昌", "尋烏"], "山東": ["濟南", "聊城", "德州", "東營", "淄博", "濰坊", "煙臺", "威海", "青島", "日照", "臨沂", "棗莊", "濟寧", "泰安", "萊蕪", "濱州", "菏澤", "惠民縣", "羊角溝", "長島", "龍口", "成山頭", "朝城", "泰山", "沂源", "萊陽", "海陽", "石島", "兗州", "莒縣"], "河南": ["鄭州", "三門峽", "洛陽", "焦作", "新鄉", "鶴壁", "安陽", "濮陽", "開封", "商丘", "許昌", "漯河", "平頂山", "南陽", "信陽", "周口", "駐馬店", "濟源", "盧氏", "孟津", "欒川", "西峽", "寶豐", "西華", "固始"], "湖北": ["武漢", "十堰", "襄樊", "荊門", "孝感", "黃岡", "鄂州", "黃石", "咸寧", "荊州", "宜昌", "隨州", "仙桃", "天門", "潛江", "神農架", "恩施", "鄖西", "房縣", "老河口", "棗陽", "巴東", "鐘祥", "廣水", "麻城", "五峰", "來風", "嘉魚", "英山"], "湖南": ["長沙", "張家界", "常德", "益陽", "岳陽", "株洲", "湘潭", "衡陽", "郴州", "永州", "邵陽", "懷化", "婁底", "吉首", "桑植", "石門", "南縣", "沅陵", "安化", "沅江", "平江", "芷江", "雙峰", "南岳", "通道", "武岡", "零陵", "常寧", "道縣"], "廣東": ["廣州", "清遠", "韶關", "河源", "梅州", "潮州", "汕頭", "揭陽", "汕尾", "惠州", "東莞", "深圳", "珠海", "中山", "江門", "佛山", "肇慶", "云浮", "陽江", "茂名", "湛江", "南雄", "連縣", "佛岡", "連平", "廣寧", "增城", "五華", "惠來", "南澳", "信宜", "羅定", "臺山", "電白", "徐聞"], "廣西": ["南寧", "桂林", "柳州", "梧州", "貴港", "玉林", "欽州", "北海", "防城港", "崇左", "百色", "河池", "來賓", "賀州", "融安", "鳳山", "都安", "蒙山", "那坡", "靖西", "平果", "桂平", "龍州", "靈山", "東興", "潿洲島"], "海南": ["海口", "三亞", "文昌", "瓊海", "萬寧", "東方", "澄邁", "定安", "儋縣", "瓊中", "陵水", "西沙", "昌江", "樂東", "白沙", "臨高"], "四川": ["成都", "廣元", "綿陽", "德陽", "南充", "廣安", "遂寧", "內江", "樂山", "自貢", "瀘州", "宜賓", "攀枝花", "巴中", "達川", "資陽", "眉山", "雅安", "阿壩", "甘孜", "西昌", "石渠", "若爾蓋", "德格", "色達", "道孚", "馬爾康", "紅原", "小金", "松潘", "都江堰", "平武", "巴塘", "新龍", "理塘", "稻城", "康定", "峨眉山", "木里", "九龍", "越西", "昭覺", "雷波", "鹽源", "會理", "萬源", "閬中", "奉節", "梁平", "萬縣市", "敘永", "酉陽"], "貴州": ["貴陽", "六盤水", "遵義", "安順", "畢節", "銅仁", "凱里", "都勻", "興義", "威寧", "盤縣", "桐梓", "習水", "湄潭", "思南", "黔西", "三穗", "興仁", "望謨", "羅甸", "獨山", "榕江"], "云南": ["昆明", "曲靖", "玉溪", "保山", "昭通", "麗江", "思茅", "臨滄", "德宏", "怒江", "迪慶", "大理", "楚雄", "紅河", "文山州", "德欽", "貢山", "中甸", "維西", "華坪", "會澤", "騰沖", "元謀", "沾益", "瑞麗", "景東", "瀘西", "耿馬", "瀾滄", "景洪", "元江", "勐臘", "江城", "蒙自", "屏邊", "廣南", "勐海"], "西藏": ["拉薩", "那曲", "昌都", "林芝", "山南", "日喀則", "阿里", "獅泉河", "改則", "班戈", "安多", "普蘭", "申扎", "當雄", "拉孜", "尼木", "澤當", "聶拉木", "定日", "江孜", "錯那", "隆子", "帕里", "索縣", "丁青", "嘉黎", "洛隆", "波密", "左貢", "察隅"], "陜西": ["西安", "延安", "銅川", "渭南", "咸陽", "寶雞", "漢中", "榆林", "安康", "商洛", "定邊", "吳旗", "橫山", "綏德", "長武", "洛川", "武功", "華山", "略陽", "佛坪", "鎮安", "石泉"], "甘肅": ["蘭州", "嘉峪關", "金昌", "白銀", "天水", "武威", "酒泉", "張掖", "慶陽", "安西", "隴南", "臨夏", "甘南", "馬鬃山", "敦煌", "玉門鎮", "金塔", "高臺", "山丹", "永昌", "民勤", "景泰", "靖遠", "榆中", "臨洮", "環縣", "平涼", "西峰鎮", "瑪曲", "夏河合作", "岷縣", "定西"], "青海": ["西寧", "海東", "海北", "海南", "黃南", "果洛", "玉樹", "海西", "茫崖", "冷湖", "祁連", "大柴旦", "德令哈", "剛察", "門源", "格爾木", "都蘭", "共和縣", "貴德", "民和", "興海", "同德", "同仁", "雜多", "曲麻萊", "瑪多", "清水河", "達日", "河南", "久治", "囊謙", "班瑪"], "寧夏": ["銀川", "石嘴山", "吳忠", "固原", "中衛", "惠農", "陶樂", "中寧", "鹽池", "海源", "同心", "西吉"], "新疆": ["烏魯木齊", "克拉瑪依", "石河子", "阿拉爾", "喀什", "阿克蘇", "和田", "吐魯番", "哈密", "克孜勒", "博爾塔拉", "昌吉", "庫爾勒", "伊犁", "塔城", "阿勒泰", "哈巴河", "吉木乃", "福海", "富蘊", "和布克賽爾", "青河", "阿拉山口", "托里", "北塔山", "溫泉", "精河", "烏蘇", "蔡家湖", "奇臺", "昭蘇", "巴侖臺", "達板城", "七角井", "庫米什", "巴音布魯克", "焉耆", "拜城", "輪臺", "庫車", "吐爾尕特", "烏恰", "阿合奇", "巴楚", "柯坪", "鐵干里克", "若羌", "塔什庫爾干", "莎車", "皮山", "民豐", "且末", "于田", "巴里坤", "伊吾", "伊寧"], "香港": ["香港"], "澳門": ["澳門"], "臺灣": ["臺北", "臺中", "高雄"] };$(function () {//初始化 所有的省的數據 $.each(CITYS,function (keyPro,val_city) {var $option = "<option>"+keyPro+"</option>";$("#province").append($option);})//省的數據改變時加載市的數據 $("#province").on("change",function () {var province = $("#province option:selected").text();$("#city").empty();$.each(CITYS[province],function (i,val) {$("#city").append("<option>"+val+"</option>")})})//上來后初始化一下城市的數據 $("#province").triggerHandler("change");}) </script> <div class="area"><select name="province" id="province"></select><select name="city" id="city"></select> </div> </body> </html>?
?
轉載于:https://www.cnblogs.com/alex-xxc/p/10026112.html
總結
以上是生活随笔為你收集整理的jquery 实现省市二级联动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript高手之路：原型和原型
- 下一篇： [推荐]令人震撼的图片展示效果