当前位置: 首页 > 图文教程 > 网络编程 > JSP > 三级级联下拉菜单实现

JSP
无需调优的内存优化
JAVA EXCEL API
新手指南之如何搜索你的问题的答案
Java 101：如果我不懂Java该怎么办？
jsp由浅入深
把本页内容导出成word文件或excel文件（原创）
在BEA WebLogic中使用Java消息服务
Form Your Own Design Pattern Study Group
从Coding Fan到真正的技术专家
我的Mysql5.0中文乱码解决方案
结合JAVASCRIPT将HTML导入Excel形成简单Web报表
Struts 的汉字显示问题终结解决方案
j2me网络实战指南
Java Page Flow开发：从JDBC数据源中检索并显示数据
人生、梦想、Java，又一个梦想者上路！
用Struts开发基于MVC的Web应用
Apache plug-in配置代理请求实战
一个简单的Timer Service
Tomcat 服务器下 JSP 页面中文问题及解决方法总结
Java Servlet 编程及应用(一)

No. « 1 2 3 4 »

技术文章搜索

关键字

JSP 中的 三级级联下拉菜单实现

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-03   浏览: 214 ::
收藏到网摘: n/a

三级级联下拉菜单实现(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里建一个三维数组,

玩不转,所以根据网上的一些资料总结了这么一种做法.不知道有没有用.
有什么不妥不洁之处,烦请各位务必通知小弟.这里抛砖引玉了.
derekzhangv.at.hotmail.com