| 三級級聯下拉菜單實現 |
| zhangv 原創 (參與分：15623，專家分：1020) 發表：2005-05-28 13:31 版本：1.0 閱讀：1490次 | |
三級級聯下拉菜單實現(xml+js+struts)
derekzhangv.at.hotmail.com
好不容易實現的一個三級級聯菜單,喜歡把復雜的問題簡單化,所以從網上的一些方法中提取出一種相對清爽的方法 -
jsp頁面里只多了2行代碼.(不過多了兩個文件)
項目是用struts,所以jsp為例(其實這個實現應該在任何情況下都是可以用的,無論asp,php...)生成:"1個form里含2組3級級
聯菜單"
從某省某市某縣
到某省某市某縣
步驟:
1.xml數據源,也就是保存省市地名層次信息.
如果沒有這個文件可能需要自己做一個,從數據庫或者文本里提取一個xml文件出來應該不算難事吧.
再說這樣的文件保存在xml文件里遲早會有用處的.
本例為:
(city.xml)
==========================
<?xml version="1.0" encoding="gb2312"?>
<provinces>
<province name="吉林" shortname="吉">
<city name="長春">
<county name="" />
<county name="雙陽" />
<county name="農安" />
</city>
</province>
<province name="北京" shortname="京">
<city name="">
<county name="" />
<county name="北京" />
<county name="東城" />
<county name="西城" />
</city>
</province>
<province name="山西" shortname="晉">
<city name="太原">
<county name="" />
<county name="古交" />
<county name="陽曲" />
<county name="清徐" />
<county name="婁煩" />
</city>
<city name="大同">
<county name="" />
<county name="天鎮" />
<county name="靈丘" />
</city>
</province>
</provinces>
==========================
2.javascript(小弟的js學的不好,還請各位寫個更好更簡潔的方法)
(selectCity.js)
==========================
var from=["province","city","county"];
var to=["toprovince","tocity","tocounty"];
function selectFrom(num){
if(num==3) return;
var i,j,arrTemp=[];
for(i=0;i<num;i++)
arrTemp[i]=document.all(from[i]).options[document.all(from[i]).selectedIndex].text
with(document.all(from[num])){
length=0
var obj=document.all.xmlData.XMLDocument.childNodes[1];
for(i=0;i<num;i++)
obj=obj.selectSingleNode(from[i]+'[@name="'+arrTemp[i]+'"]');
for(i=0;i<obj.childNodes.length;i++)
options[length++].text=obj.childNodes[i].getAttribute("name");
onchange=new Function("selectFrom("+(num+1)+")");
onchange();
}
}
function selectTo(num){
if(num==3) return;
var i,j,arrTemp=[];
for(i=0;i<num;i++)
arrTemp[i]=document.all(to[i]).options[document.all(to[i]).selectedIndex].text
with(document.all(to[num])){
length=0
var obj=document.all.xmlData.XMLDocument.childNodes[1];
for(i=0;i<num;i++)
obj=obj.selectSingleNode(from[i]+'[@name="'+arrTemp[i]+'"]');
for(i=0;i<obj.childNodes.length;i++)
options[length++].text=obj.childNodes[i].getAttribute("name");
onchange=new Function("selectTo("+(num+1)+")");
onchange();
}
}
==========================
3.頁面文件:(這里是struts,--這個應該沒有關系)
(test.jsp)
==========================
<script src="selectCity.js"></script>
<xml id=xmlData src="city.xml" />
<body onload="selectFrom(0);selectTo(0);">
<html:form>
從<html:select property="province" ></html:select><html:errors property="province"/>
<html:select property="city"></html:select><html:errors property="city"/>
<html:select property="county"></html:select><html:errors property="county"/><br/>
到 <html:select property="toprovince" ></html:select><html:errors property="toprovince"/>
<html:select property="tocity"></html:select><html:errors property="tocity"/>
<html:select property="tocounty"></html:select><html:errors property="tocounty"/>
</html:form>
</body>
==========================
這樣的三步就構造了一個"1個form里含2組3級級聯菜單",其實還是滿麻煩的.之前還見過一種是在js里建一個三維數組,
| |
posted on 2005-10-07 16:35
R.Zeus 閱讀(826)
評論(0) 編輯 收藏 所屬分類:
STRUTS