當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript省市二级联动

發布時間：2023/12/1 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript省市二级联动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

XML文件負責保存所需要的數據，而HTML文件負責通過javascript解析XML數據并顯示在頁面上。代碼如下：

cities.xml?

<?xml version="1.0" encoding="GB2312"?> <china><province name="吉林省"><city>長春</city><city>吉林市</city><city>四平</city><city>松原</city><city>通化</city></province><province name="遼寧省"><city>沈陽</city><city>大連</city><city>鞍山</city><city>撫順</city></province><province name="山東省"><city>濟南</city><city>青島</city><city>威海</city><city>煙臺</city><city>濰坊</city></province><province name="湖北省"><city>武漢</city><city>廣水</city><city>孝感</city><city>荊州</city><city>黃石</city><city>鄂州</city><city>黃岡</city></province> </china>

city.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>二級聯動</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body><select id="province" ><option>--請選擇--</option><option value="湖北省">湖北省</option><option value="吉林省">吉林省</option><option value="遼寧省">遼寧省</option><option value="山東省">山東省</option></select><select id="city"><option>--請選擇--</option></select></body><script type="text/javascript">document.getElementById("province").οnchange=function(){//當前選中的省var provinceValue=this.value; var cityNode=document.getElementById("city");//刪除市下拉列表中的前一個省的城市項var cityOptions=cityNode.getElementsByTagName("option");for(var i=cityOptions.length-1;i>0;i--){cityNode.removeChild(cityOptions[i]);}var xmlDoc=parseXML("cities.xml");var xmlProvinceElements=xmlDoc.getElementsByTagName("province");//下拉列表中添加選中省的城市項 for(var i=0;i<xmlProvinceElements.length;i++){if(xmlProvinceElements[i].getAttribute("name")==provinceValue){var xmlCityElements=xmlProvinceElements[i].getElementsByTagName("city");for(var j=0;j<xmlCityElements.length;j++){var xmlCityName=xmlCityElements[j].firstChild.nodeValue; var cityOptionElement=document.createElement("option");cityOptionElement.setAttribute("value",xmlCityName);cityOptionElement.appendChild(document.createTextNode(xmlCityName));cityNode.appendChild(cityOptionElement);}break;}}}/** 加載XML文件* @param {Object} filename*/function parseXML(filename){try{ //Internet Explorer 創建一個空的xml文檔xmlDoc=new ActiveXObject("Microsoft.XMLDOM");}catch(e){ // Firefox,Mozilla,Opera....try {xmlDoc=document.implementation.createsDocument("","",null);}catch(e){}}//關閉異步加載xmlDoc.async=false;//加載XML文檔xmlDoc.load(filename);return xmlDoc;}</script> </html>

總結

以上是生活随笔為你收集整理的JavaScript省市二级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。