javascript中怎么實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)

javascript中怎么實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

這里先準(zhǔn)備三個(gè)select元素，如下所示：

<div class="select_wrap"> <span>?。?lt;/span> <select id="province"> <option value="">請(qǐng)選擇</option> </select> <span>市：</span> <select id="city"> <option value="">請(qǐng)選擇</option> </select> <span>區(qū)/縣：</span> <select id="county"> <option value="">請(qǐng)選擇</option> </select></div>

再準(zhǔn)備一些城市相關(guān)數(shù)據(jù)，本實(shí)例只列舉了少量數(shù)量。如下所示：

var data = { "北京市": { "市轄區(qū)": ["東城區(qū)", "西城區(qū)", "朝陽區(qū)", "豐臺(tái)區(qū)", "石景山區(qū)", "海淀區(qū)", "門頭溝區(qū)", "房山區(qū)", "通州區(qū)", "順義區(qū)", "昌平區(qū)", "大興區(qū)", "懷柔區(qū)", "平谷區(qū)", "密云區(qū)", "延慶區(qū)"] }, "河北省": { "石家莊市": ["長安區(qū)", "橋西區(qū)", "新華區(qū)", "井陘礦區(qū)", "裕華區(qū)", "藁城區(qū)", "鹿泉區(qū)", "欒城區(qū)", "井陘縣", "正定縣", "行唐縣", "靈壽縣", "高邑縣", "深澤縣", "贊皇縣", "無極縣", "平山縣", "元氏縣", "趙縣", "石家莊高新技術(shù)產(chǎn)業(yè)開發(fā)區(qū)", "石家莊循環(huán)化工園區(qū)", "辛集市", "晉州市", "新樂市"], "唐山市": ["路南區(qū)", "路北區(qū)", "古冶區(qū)", "開平區(qū)", "豐南區(qū)", "豐潤區(qū)", "曹妃甸區(qū)", "灤縣", "灤南縣", "樂亭縣", "遷西縣", "玉田縣", "唐山市蘆臺(tái)經(jīng)濟(jì)技術(shù)開發(fā)區(qū)", "唐山市漢沽管理區(qū)", "唐山高新技術(shù)產(chǎn)業(yè)開發(fā)區(qū)", "河北唐山海港經(jīng)濟(jì)開發(fā)區(qū)", "遵化市", "遷安市"], "秦皇島市": ["海港區(qū)", "山海關(guān)區(qū)", "北戴河區(qū)", "撫寧區(qū)", "青龍滿族自治縣", "昌黎縣", "盧龍縣", "秦皇島市經(jīng)濟(jì)技術(shù)開發(fā)區(qū)", "北戴河新區(qū)"], "邯鄲市": ["邯山區(qū)", "叢臺(tái)區(qū)", "復(fù)興區(qū)", "峰峰礦區(qū)", "肥鄉(xiāng)區(qū)", "永年區(qū)", "臨漳縣", "成安縣", "大名縣", "涉縣", "磁縣", "邱縣", "雞澤縣", "廣平縣", "館陶縣", "魏縣", "曲周縣", "邯鄲經(jīng)濟(jì)技術(shù)開發(fā)區(qū)", "邯鄲冀南新區(qū)", "武安市"], "衡水市": ["桃城區(qū)", "冀州區(qū)", "棗強(qiáng)縣", "武邑縣", "武強(qiáng)縣", "饒陽縣", "安平縣", "故城縣", "景縣", "阜城縣", "河北衡水經(jīng)濟(jì)開發(fā)區(qū)", "衡水濱湖新區(qū)", "深州市"] }, "湖南省": { "長沙市": ["芙蓉區(qū)", "天心區(qū)", "岳麓區(qū)", "開福區(qū)", "雨花區(qū)", "望城區(qū)", "長沙縣", "瀏陽市", "寧鄉(xiāng)市"], "株洲市": ["荷塘區(qū)", "蘆淞區(qū)", "石峰區(qū)", "天元區(qū)", "株洲縣", "攸縣", "茶陵縣", "炎陵縣", "云龍示范區(qū)", "醴陵市"], "湘潭市": ["雨湖區(qū)", "岳塘區(qū)", "湘潭縣", "湖南湘潭高新技術(shù)產(chǎn)業(yè)園區(qū)", "湘潭昭山示范區(qū)", "湘潭九華示范區(qū)", "湘鄉(xiāng)市", "韶山市"], "衡陽市": ["珠暉區(qū)", "雁峰區(qū)", "石鼓區(qū)", "蒸湘區(qū)", "南岳區(qū)", "衡陽縣", "衡南縣", "衡山縣", "衡東縣", "祁東縣", "衡陽綜合保稅區(qū)", "湖南衡陽高新技術(shù)產(chǎn)業(yè)園區(qū)", "湖南衡陽松木經(jīng)濟(jì)開發(fā)區(qū)", "耒陽市", "常寧市"], }, "廣東省": { "廣州市": ["荔灣區(qū)", "越秀區(qū)", "海珠區(qū)", "天河區(qū)", "白云區(qū)", "黃埔區(qū)", "番禺區(qū)", "花都區(qū)", "南沙區(qū)", "從化區(qū)", "增城區(qū)"], "韶關(guān)市": ["武江區(qū)", "湞江區(qū)", "曲江區(qū)", "始興縣", "仁化縣", "翁源縣", "乳源瑤族自治縣", "新豐縣", "樂昌市", "南雄市"], "深圳市": ["羅湖區(qū)", "福田區(qū)", "南山區(qū)", "寶安區(qū)", "龍崗區(qū)", "鹽田區(qū)", "龍華區(qū)", "坪山區(qū)"], "珠海市": ["香洲區(qū)", "斗門區(qū)", "金灣區(qū)"], }};

PS:實(shí)際工作的數(shù)據(jù)一般由數(shù)據(jù)庫提供。如有需要也可以到網(wǎng)上搜索，很多大神都搜集有完整的城市數(shù)據(jù)。

準(zhǔn)備好這些，我們按照慣例來分析功能，再一步一步完成。

1 分別獲取省市縣三個(gè)下拉框，如下所示：

var eProvince = document.getElementById('province');var .........

看完上述內(nèi)容，你們掌握javascript中怎么實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！