AttachXMLForSelect:XML自动关联多级SELECT菜单代码和例子

原创 2002年08月13日 09:24:00

http://www.csdn.net/Expert/TopicView1.asp?id=933535

<HTML>
<META NAME="save" CONTENT="history"/>

<script>

/*
关联XML到1个到N个的Select
没有做历史记录
*/

function AttachXMLForSelect(xd,arr,defaultText,defaultValue)//xd:xmldom,arr:array of select
{
 function EnsureString(str)
 {
  if(typeof(str)=="string")return str;
  if(str==null)return "";
  try{return str+"";}catch(x){}
  return "";
 }
 defaultText=EnsureString(defaultText);
 defaultValue=EnsureString(defaultValue);

 //检查参数
 if(xd==null||xd.documentElement==null||arr==null||arr.length==0)
  throw(new Error(-1,"invalid arguments"));

 //转换成内部的xd
 (function(xmldom){
  xd=new ActiveXObject("Microsoft.XMLDOM");
  xd.loadXML(xmldom.xml);
 })(xd)

 //把Select释放掉,换成uniqueID来储存
 for(var i=0;i<arr.length;i++)
  arr[i]={
   uniqueID:arr[i].uniqueID
   ,
   node:null //当前关联的XML Node
   ,
   attach:false //当前是否关联到OnSelectChange
  };

 //把第一个Select相关的XML node设置为XML的根元素
 arr[0].node=xd.documentElement;

 //关联第一个Select
 ReAttachNode(0);

 var Controller={

  HandleChange:HandleChange

 };

 return Controller;

 //响应用户操作
 function OnSelectChange(event)
 {
  HandleChange(event.srcElement);
 }
 //处理Select可能被修改的情况,确认后面的Select正常
 function HandleChange(s)
 {
  //取得Select在arr中的位置
  for(var index=0;index<arr.length;index++)
  {
   if(s.uniqueID==arr[index].uniqueID)
   break;
  }
  //如果不是最后一个Select
  if(index<arr.length-1)
  {
   var node=arr[index].node;

   //关联下一个Select相关的XML node
   if(node)
   {
    var xns=node.selectNodes("item");
    arr[index+1].node=xns.item(s.selectedIndex);
   }
   else arr[index+1].node=null;

   //关联下一个Select
   /*关联递归处*/
   ReAttachNode(index+1);
  }
 }

 //关联,重关联一个Select到指定的node
 function ReAttachNode(index)
 {
  //取当前关联的node
  var node=arr[index].node;
  var pnode=null;
  if(index>0)pnode=arr[index].node;

  //取当前Select
  var s=document.getElementById(arr[index].uniqueID);
  //清楚当前Select的内容
  s.innerHTML="";

  //如果有defaultText,那么设置一项
  if((node==null||node.selectNodes("item").length==0)&&defaultText)
  {
   var o=document.createElement("OPTION");
   o.value=defaultValue;
   o.innerText=defaultText;
   s.appendChild(o);
  }

  //如果关联的node为空,那么取消事件关联
  if(node==null)
  {
   if(arr[index].attach)
   {
    s.detachEvent("onchange",OnSelectChange);
    arr[index].attach=false;
   }

   /*关联递归处*/
   HandleChange(s);
   return;
  }

  //如果node不为空

  //重新关联事件
  if(arr[index].attach==false)
  {
   s.attachEvent("onchange",OnSelectChange);
   arr[index].attach=true;
  }

  //把子node的值倒入到Select中
  var xns=node.selectNodes("item");
  for(var i=0;i<xns.length;i++)
  {
   var o=document.createElement("OPTION");
   o.value=xns.item(i).getAttribute("value");
   o.innerText=xns.item(i).getAttribute("text");
   s.appendChild(o);
  }

  //这个。。。可能不需要吧。。。
  if(s.options.length)
   s.selectedIndex=0;

  /*关联递归处*/
  HandleChange(s);
 }
}

</script>

<BODY>
<XML id=oxml>
<item>
 <item text="text1" value="value1">
  <item text="text11" value="value11">
   <item text="text111" value="value111"/>
   <item text="text112" value="value112"/>
   <item text="text113" value="value113"/>
   <item text="text114" value="value114"/>
  </item>
  <item text="text12" value="value12">
   <item text="text121" value="value121"/>
   <item text="text122" value="value122"/>
   <item text="text123" value="value123"/>
   <item text="text124" value="value124"/>
  </item>
  <item text="text13" value="value13">
   <item text="text131" value="value131"/>
   <item text="text132" value="value132"/>
   <item text="text133" value="value133"/>
   <item text="text134" value="value134"/>
  </item>
  <item text="text14" value="value14">
   <item text="text141" value="value141"/>
   <item text="text142" value="value142"/>
   <item text="text143" value="value143"/>
   <item text="text144" value="value144"/>
  </item>
 </item>
 <item text="text2" value="value2">
  <item text="text21" value="value21">
   <item text="text211" value="value211"/>
   <item text="text212" value="value212"/>
   <item text="text213" value="value213"/>
   <item text="text214" value="value214"/>
  </item>
  <item text="text22" value="value22">
   <item text="text221" value="value221"/>
   <item text="text222" value="value222"/>
   <item text="text223" value="value223"/>
   <item text="text224" value="value224"/>
  </item>
  <item text="text23" value="value23">
   <item text="text231" value="value231"/>
   <item text="text232" value="value232"/>
   <item text="text233" value="value233"/>
   <item text="text234" value="value234"/>
  </item>
  <item text="text24" value="value24">
   <item text="text241" value="value241"/>
   <item text="text242" value="value242"/>
   <item text="text243" value="value243"/>
   <item text="text244" value="value244"/>
  </item>
 </item>
</item>
</XML>
<SCRIPT>
function AlertForm(f)
{
 alert(
  "s1:/t"+GetSelectOption(f("s1")).innerText + "/t:/t" + GetSelectOption(f("s1")).value + "/r/n"
  +
  "s2:/t"+GetSelectOption(f("s2")).innerText + "/t:/t" + GetSelectOption(f("s2")).value + "/r/n"
  +
  "s3:/t"+GetSelectOption(f("s3")).innerText + "/t:/t" + GetSelectOption(f("s3")).value + "/r/n"
 );
 return event.returnValue=false;
}
function GetSelectOption(s)
{
 return s(s.selectedIndex);
}
</SCRIPT>
<FORM id=f1 onsubmit="AlertForm(this)"
><SELECT name="s1" style="width:100px;"></SELECT
><SELECT name="s2" style="width:100px;"></SELECT
><SELECT name="s3" style="width:100px;"></SELECT
><INPUT type="submit">
</FORM>
<input type=hidden id=inpSave style="behavior:url(#default#savehistory)" value="000">
</BODY>

<script>
var C=AttachXMLForSelect(oxml.XMLDocument,[f1("s1"),f1("s2"),f1("s3")]);
//暴露Controller是因为IE5.0没有提供fireEvent,,555555

//下面的代码是储存状态的。
function window.onload()
{
 var sis=inpSave.value;
 f1("s1").selectedIndex=parseInt(sis.charAt(0));
 C.HandleChange(f1("s1"));
 f1("s2").selectedIndex=parseInt(sis.charAt(1));
 C.HandleChange(f1("s2"));
 f1("s3").selectedIndex=parseInt(sis.charAt(2));
 C.HandleChange(f1("s3")); 
}
function window.onbeforeunload()
{
 inpSave.value=""+f1("s1").selectedIndex+f1("s2").selectedIndex+f1("s3").selectedIndex;
}
</script>
</HTML>

JavaScript解析Json实现动态修改多级下拉选择列表控件Select

最终效果: 根据上级菜单所选,决定下级菜单的列表项内容 数据源 首先读取数据库中的数据得到数据,由于数据库中的数据是分散的几个二维表格,查询出来的数据是Map键值对的List集合,不能直接拿来用...
  • c12366456
  • c12366456
  • 2015年08月09日 12:50
  • 3058

select简单2级联动

是否还被游戏服务区的选择而惊叹?是否还被选择框的自动生成而诧异?其实一切都是“纸老虎”! 在这里U can do it! 首先,在select中,value和text的区别在于:value是客户...
  • SchopenhauerZhang
  • SchopenhauerZhang
  • 2016年05月31日 11:48
  • 7400

Ajax动态访问数据库设计html多级select下拉菜单的方法

getArea(0,$(''));//调用方法,第一个参数是要查询项目的id,根据数据库来就好,第二个参数是一个select对象,可以是现有的,也可以生成一个新的在页面刷新的时候自动append到bo...
  • lvshaorong
  • lvshaorong
  • 2015年09月24日 22:20
  • 2197

多叉树结合JavaScript树形控件实现无限级树形菜单(一种构建多级有序树形结构JSON(或XML)数据源的方法)

多叉树结合JavaScript树形控件实现无限级树形菜单(一种构建多级有序树形结构JSON(或XML)数据源的方法) 一、问题研究的背景和意义 在Web应用程序开发领域,基于AJAX技术的Java...
  • zero_295813128
  • zero_295813128
  • 2017年03月10日 18:14
  • 901

单片机实现多级菜单

单片机实现多级菜单 1、首先定义一个机构体如下 typedef struct    {      uchar current;      uchar up;//上键      uc...
  • u010980705
  • u010980705
  • 2016年09月20日 22:01
  • 1462

简易select二级联动

简易select二级联动 本文主要是实现一个简易的国家城市二级联动。 主要用到的两个知识点就是selectedIndex和for循环。 简单的效果图如下: 代码如下: ...
  • core_song
  • core_song
  • 2016年12月13日 15:33
  • 2035

单片机LCD简单多级菜单实现

多年以前,我写过一篇12864lcd显示屏多级菜单代码实现 博客,当时草率的实现了一个菜单画面,然并没有实际用处,因为作为菜单的选取响应动作并没有在其中实现。这个就是补充了。...
  • ymsunshine
  • ymsunshine
  • 2016年12月11日 23:36
  • 3514

THINKPHP + JQUERY 多级下拉列表联动

原文链接:http://bbs.php100.com/simple/?t502731.html THINKPHP + JQUERY 多级下拉列表联动 前几天学习到JQUERY AJAX那一...
  • creathly003
  • creathly003
  • 2016年12月01日 20:01
  • 1552

最简单js代码实现select二级联动下拉菜单(测试通过)

New Document //定义了城市的二维数组,里
  • jaray
  • jaray
  • 2016年10月12日 14:43
  • 5044

使用java 和freemarker实现多级菜单(分类)

项目刚开始菜单或者分类只支持两级,但是要多级菜单无法支持,因此,花点时间使用java和freemarker 实现多级菜单。。直接上代码。。 一.java代码 1.model类 :分类 public ...
  • tianhongqiang
  • tianhongqiang
  • 2016年03月30日 16:20
  • 1662
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AttachXMLForSelect:XML自动关联多级SELECT菜单代码和例子
举报原因:
原因补充:

(最多只允许输入30个字)