如何做一个自动匹配的多列下拉框（有源码

jxyangzi2013 2005-01-23 11:46:01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
;
<HTML><HEAD><TITLE>模拟下拉列表框</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE>BODY {
FONT: 12px 宋体
}
TD {
FONT: 12px 宋体
}
DIV {
FONT: 12px 宋体
}
LABEL {
HEIGHT: 19px; PADDING-BOTTOM: 0px; PADDING-LEFT: 4px; PADDING-RIGHT: 0px; PADDING-TOP: 3px
}
.link_box {
CURSOR: default; TEXT-ALIGN: left
}
.link_head {
BORDER-BOTTOM: 2px inset; BORDER-LEFT: 2px inset; BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; HEIGHT: 23px; WIDTH: 100%
}
.link_text {
BACKGROUND: #fff; PADDING-LEFT: 2px
}
.link_arrow0 {
BACKGROUND: buttonface; BORDER-BOTTOM: 2px outset; BORDER-LEFT: 2px outset; BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; FONT: 14px marlett; HEIGHT: 100%; TEXT-ALIGN: center; WIDTH: 22px
}
.link_arrow1 {
BACKGROUND: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonshadow 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonshadow 1px solid; FONT: 14px marlett; HEIGHT: 100%; PADDING-BOTTOM: 0px; PADDING-LEFT: 2px; PADDING-RIGHT: 0px; PADDING-TOP: 2px; TEXT-ALIGN: center; WIDTH: 22px
}
.link_value {
BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0); OVERFLOW: auto; OVERFLOW-X: hidden; POSITION: absolute; VISIBILITY: hidden
}
.link_record0 {
BACKGROUND: #fff; BORDER-TOP: #eee 1px solid; COLOR: #000; HEIGHT: 20px; PADDING-LEFT: 2px; WIDTH: 100%
}
.link_record1 {
BACKGROUND: #058; BORDER-TOP: #047 1px solid; COLOR: #fe0; HEIGHT: 20px; PADDING-LEFT: 2px; WIDTH: 100%
}
</STYLE>

<SCRIPT>
var dropShow=false
var currentID
function dropdown(el){
if(dropShow){
dropFadeOut()
}else{
currentID=el
el.style.visibility="visible"
dropFadeIn()
}
}
function dropFadeIn(){//选单淡入的效果
if(currentID.filters.alpha.opacity<100){
currentID.filters.alpha.opacity+=20
fadeTimer=setTimeout("dropFadeIn()",50)
}else{
dropShow=true
clearTimeout(fadeTimer)
}
}
function dropFadeOut(){//选单淡出的效果
if(currentID.filters.alpha.opacity>0){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity-=20
fadeTimer=setTimeout("dropFadeOut()",50)
}else{
dropShow=false
currentID.style.visibility="hidden"
}
}
function dropdownHide(){
if(dropShow){
dropFadeOut()
dropShow=false
}
}
function hiLight(el){//高亮度显示指标位置
if(dropShow){
for(i=0;i<el.parentElement.childNodes.length;i++){
el.parentElement.childNodes(i).className="link_record0"
}
el.className="link_record1"
}
}
function CheckMe(el){//替换显示内容
document.all.text1.innerText=el.innerText
}
document.onclick=dropdownHide
</SCRIPT>

<META content="MSHTML 5.00.3315.2870" name=GENERATOR></HEAD>
<BODY onload=document.all.form1.reset() text=#000000>
<DIV
style="BORDER-BOTTOM: red 2px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px">模拟下拉框</DIV>
<FORM action=WebDropDownList.aspx id=form1 method=post name=form1
onsubmit=alert(city.value)><INPUT name=__VIEWSTATE type=hidden
value=dDwtNzI1NDg3MjkzOzs+>
<TABLE>
<TBODY>
<TR>
<TD>
<DIV class=link_box onselectstart="return false" style="WIDTH: 100px">
<DIV class=link_head onclick=dropdown(value1)>
<TABLE border=0 cellPadding=0 cellSpacing=0 height="100%" width="100%">
<TBODY>
<TR>
<TD>
<DIV class=link_text><NOBR><input type="text" name="txt1"
id=text1 value="请选择？"></NOBR></DIV></TD>
<TD align=right width=22>
<DIV class=link_arrow0 onmousedown="this.className='link_arrow1'"
onmouseout="this.className='link_arrow0'"
onmouseup="this.className='link_arrow0'">6</DIV></TD></TR></TBODY></TABLE></DIV>
<DIV class=link_value id=value1 style="HEIGHT: 300px; WIDTH: 500px">
<TABLE border=1 cellSpacing=0 id=DataGrid1 rules=all
style="BORDER-COLLAPSE: collapse; FONT-SIZE: 12px; WIDTH: 100%"
singleValue="#FFFFFF" oldValue="oldlace">
<TBODY>
<TR bgColor=#ffffff
onclick=document.all.text1.innerText=this.cells[0].innerText;document.all.form1.city.value=this.cells[0].innerText;
onmouseout="this.bgColor=document.getElementById('DataGrid1').getAttribute('singleValue')"
onmouseover="this.bgColor='#C1D2EE'">
<TD style="WIDTH: 400px"><IMG align=absMiddle
src="模拟下拉列表框.files/meng.gif"> 在.NET中实现彩色光标，动画光标和自定义光标</TD>
<TD style="WIDTH: 100px">2004年10月22日</TD></TR>
<TR bgColor=oldlace
onclick=document.all.text1.innerText=this.cells[0].innerText;document.all.form1.city.value=this.cells[0].innerText;
onmouseout="this.bgColor=document.getElementById('DataGrid1').getAttribute('oldValue')"
onmouseover="this.bgColor='#C1D2EE'">
<TD style="WIDTH: 400px"><IMG align=absMiddle
src="模拟下拉列表框.files/meng.gif"> 在 XSL/XSLT 中实现随机排序</TD>
<TD style="WIDTH: 100px">2004年10月21日</TD></TR>
<TR bgColor=#ffffff
onclick=document.all.text1.innerText=this.cells[0].innerText;document.all.form1.city.value=this.cells[0].innerText;
onmouseout="this.bgColor=document.getElementById('DataGrid1').getAttribute('singleValue')"
onmouseover="this.bgColor='#C1D2EE'">
<TD style="WIDTH: 400px"><IMG align=absMiddle
src="模拟下拉列表框.files/meng.gif"> 遍历驱动器</TD>
<TD style="WIDTH: 100px">2004年10月21日</TD></TR>
<TR bgColor=oldlace
onclick=document.all.text1.innerText=this.cells[0].innerText;document.all.form1.city.value=this.cells[0].innerText;
onmouseout="this.bgColor=document.getElementById('DataGrid1').getAttribute('oldValue')"
onmouseover="this.bgColor='#C1D2EE'">
<TR bgColor=#ffffff
onclick=document.all.text1.innerText=this.cells[1].innerText;document.all.form1.city.value=this.cells[0].innerText;
onmouseout="this.bgColor=document.getElementById('DataGrid1').getAttribute('singleValue')"
onmouseover="this.bgColor='#C1D2EE'">
<TD style="WIDTH: 400px"><IMG align=absMiddle
src="模拟下拉列表框.files/meng.gif"> 随机显示数据库记录</TD>
<TD style="WIDTH: 100px">2003年04月13日</TD></TR></TBODY></TABLE>
</DIV></DIV></DIV></DIV></TD>
<TD><INPUT name=city type=hidden value=您尚未选择> <INPUT type=submit value=确定>
</TD></TR></TBODY></TABLE></FORM></BODY></HTML>

...全文