easy!!! 如何在jsp页面实现下拉框的连动即当选一个<select>时另一个会有变化

转自 Lostinet(迷失网络)（大家注意∶他不是人）(ΔΔΔΔΔ) 在javascript版的代码，原帖子一时找不到：
<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 "";
}
function EnsureInt(i)
{
if(typeof(i)=="i")return i;
try{i=parseInt(i);}catch(x){return 0};
if(isNaN(i))return 0;
return i;
}
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;
} var node=arr[index].node; //记录状态
if(index!=0)
node.setAttribute("selectedIndex",s.selectedIndex); //如果不是最后一个Select
if(index<arr.length-1)
{
//关联下一个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=EnsureString(xns.item(i).getAttribute("value"));
o.innerText=EnsureString(xns.item(i).getAttribute("text"));
s.appendChild(o);
}

var si=0;
if(index!=0)
si=EnsureInt(node.getAttribute("selectedIndex"));
if(si==0)si="0";
if(s.options.length)
s.selectedIndex=parseInt(si); /*关联递归处*/
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>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这个问题看起来容易。但实际做起来就不怎么简单了，代码要写的很精细才行。今天我刚写完一个动态的关联菜单。
这只是个是框架，里面的数据需要你自己实现才行
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function setmember() {
switch (document.dgkt.department.value) {
case '河北' :
var labels = new Array("石家庄","沧州","唐山");
var values = new Array("sjz","cz","ts");
break;
case '山东' :
var labels = new Array("济南","青岛","烟台");
var values = new Array("jn","qd","yt");
break

} // 清空成员列表选择框的内容
document.dgkt.member.options.length = 0;
// 从数组中添加内容
for(var i = 0; i <labels.length; i++) {
document.dgkt.member.add(document.createElement("OPTION"));
document.dgkt.member.options[i].text=labels[i];
document.dgkt.member.options[i].value=values[i];
}
// 选择第一个选项
document.dgkt.member.selectedIndex = 0;
} </SCRIPT>
</HEAD>
<BODY>
<FORM NAME="dgkt">
省: <SELECT NAME="department" OnChange="setmember()">
<OPTION VALUE="河北">河北</OPTION>
<OPTION VALUE="山东" SELECTED>山东</OPTION>
</SELECT>
市:
<SELECT NAME="member"></SELECT>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
setmember();
</SCRIPT>
</BODY> </HTML>
例如年、月、日
...
<script language="javascript">
function showdate()
{
   var i,j,d,d1,d2,num;
   d = document.inputform.year;
   d1 = document.inputform.month;
   d2 = document.inputform.day;

   num = parseInt(d.options[d.selectedIndex].value);
   switch(d1.options[d1.selectedIndex].value)
   {
      case '4':
  case '6':
  case '9':
  case '11':
    d2.length = 30;
for (i=0;i<30;i++) d2.options[i].text = i+1;
break;
  case '2':
    if ((num%4 == 0) && (num%100 == 0))
    {
   d2.length = 29;
   for(i=0;i<29;i++) d2.options[i].text = i+1;
}
else
{
    d2.length = 28;
    for(i=0;i<28;i++) d2.options[i].text = i+1;
  }
  break;
   default :
      d2.length = 31;
  for(i=0;i<31;i++) d2.options[i].text = i+1;
  break;
}

}
</script>
...
<form name="inputform">
<select name="year" size="1" onChange="showdate()">
</select>年
<select name="month" size="1" onChange="showdate()">
</select>月
<select name="day" size="1">
</select>日
</form>

easy!!! 如何在jsp页面实现 下拉框的连动 即 当选一个<select>时 另一个会有变化

解决方案 »

easy!!! 如何在jsp页面实现下拉框的连动即当选一个<select>时另一个会有变化