javascript讀取Xml文件做一個(gè)二級(jí)聯(lián)動(dòng)菜單示例
更新時(shí)間:2014年03月17日 15:14:56 作者:
這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個(gè)二級(jí)聯(lián)動(dòng)菜單,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu2level.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function loadXML(){
var xmlDoc;
try{
//IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{
xmlDoc = document.implementation.createDocument("","",null);
}catch(e){
alert(e.message);
return;
}
}
xmlDoc.async=false;
xmlDoc.load("cities.xml");
return xmlDoc;
}
//網(wǎng)頁(yè)加載完在加載 完成省份加載
onload=function(){
var xmlDocument = loadXML();
var provinceArr =xmlDocument.getElementsByTagName("province");
var proSize = provinceArr.length;
for(var i=0;i<proSize;i++){
//創(chuàng)建option節(jié)點(diǎn)
var optionElement = document.createElement("option");
var provinceName = provinceArr[i].getAttribute("name");
//創(chuàng)建文本節(jié)點(diǎn)
var textElement =document.createTextNode(provinceName);
optionElement.appendChild(textElement);
optionElement.setAttribute("value", provinceName);
var node = document.getElementById("province");
node.appendChild(optionElement);
}
}
//省份改變事件
function changeProvince(node){
//獲取選擇的角標(biāo)
var index = node.selectedIndex;
//獲取對(duì)應(yīng)的省份名
var provinceName = node.options[index].value;
loadCities(provinceName);
}
//根據(jù)省份編號(hào)加載城市信息
function loadCities(proName){
var xmlDocument = loadXML();
var provinceArr =xmlDocument.getElementsByTagName("province");
//獲取城市的元素
var citySelectEle = document.getElementById("cities");
var size = citySelectEle.options.length;
for(var i=size;i>0;i--){
citySelectEle.remove(i);
}
//獲取省份的個(gè)數(shù)
var proSize = provinceArr.length;
var proElement;
//獲取對(duì)應(yīng)的省份元素
for(var i=0;i<proSize;i++){
if(provinceArr[i].getAttribute("name")==proName){
proElement = provinceArr[i];
break;
}
}
//獲取省份的城市信息
var citiesArr = proElement.getElementsByTagName("city");
var len = citiesArr.length;
for(var i=0;i<len;i++){
//創(chuàng)建option節(jié)點(diǎn)
var optionElement = document.createElement("option");
//獲取城市名
var cityName = citiesArr[i].firstChild.nodeValue;
//創(chuàng)建文本節(jié)點(diǎn)
var textElement =document.createTextNode(cityName);
optionElement.appendChild(textElement);
optionElement.setAttribute("value", cityName);
citySelectEle.appendChild(optionElement);
}
}
function getValue(){
var pro = document.getElementById("province").value;
var city = document.getElementById("cities").value;
alert(pro+":"+city);
}
</script>
</head>
<body>
<select id="province" onchange="changeProvince(this)">
<option value="" selected="selected">--省份--</option>
</select>
<select id="cities">
<option value="" selected="selected">--城市--</option>
</select>
<input type="button" value="彈出" onclick="getValue()"/>
</body>
</html>
效果如下:
http://img.blog.csdn.net/20140315235043343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
cities.xml文件如下:
復(fù)制代碼 代碼如下:
<?xml version="1.0" encoding="UTF-8"?>
<xml-body>
<province name="陜西">
<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>
</province>
</xml-body>
您可能感興趣的文章:
- JS實(shí)多級(jí)聯(lián)動(dòng)下拉菜單類,簡(jiǎn)單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單!
- JS簡(jiǎn)單實(shí)現(xiàn)多級(jí)Select聯(lián)動(dòng)菜單效果代碼
- 從QQ網(wǎng)站中提取的純JS省市區(qū)三級(jí)聯(lián)動(dòng)菜單
- 基于Javascript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單效果
- JS實(shí)現(xiàn)的五級(jí)聯(lián)動(dòng)菜單效果完整實(shí)例
- PHP+JS三級(jí)菜單聯(lián)動(dòng)菜單實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)無(wú)限級(jí)select聯(lián)動(dòng)菜單
- js 實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果
- 琥珀無(wú)限級(jí)聯(lián)動(dòng)菜單-JavaScript版
- JavaScript省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果
- javascript 無(wú)限聯(lián)動(dòng)菜單效果代碼
- JavaScript實(shí)現(xiàn)的聯(lián)動(dòng)菜單特效示例
相關(guān)文章
JS如何調(diào)用WebAssembly編譯出來(lái)的.wasm文件
這篇文章主要介紹了關(guān)于WebAssembly編譯出來(lái)的.wasm文件js如何調(diào)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11JS中的常見數(shù)組遍歷案例詳解(forEach,?map,?filter,?sort,?reduce,?ever
這篇文章主要介紹了JS中的常見數(shù)組遍歷方法詳解(forEach,?map,?filter,?sort,?reduce,?every),本篇講用實(shí)際案例詳解他們的語(yǔ)法和用法,需要的朋友可以參考下2023-05-05JavaScript實(shí)現(xiàn)原型封裝輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript原型封裝輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12javascript模擬post提交隱藏地址欄的參數(shù)
想要隱藏地址欄的參數(shù),就只能用javascript模擬post提交,下面是示例代碼,需要的朋友可以看看2014-09-09