<HTML>
<HEAD>
<title>模拟下拉列表框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>BODY { FONT: 12px 宋体 }
TD { FONT: 12px 宋体 }
DIV { FONT: 12px 宋体 }
LABEL { PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; HEIGHT: 19px }
.link_box { CURSOR: default; TEXT-ALIGN: left }
.link_head { BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset; WIDTH: 100%; BORDER-BOTTOM: 2px inset; HEIGHT: 23px }
.link_text { PADDING-LEFT: 2px; BACKGROUND: #fff }
.link_arrow0 { BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BACKGROUND: buttonface; FONT: 14px marlett; BORDER-LEFT: 2px outset; WIDTH: 22px; BORDER-BOTTOM: 2px outset; HEIGHT: 100%; TEXT-ALIGN: center }
.link_arrow1 { BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 2px; BACKGROUND: buttonface; PADDING-BOTTOM: 0px; FONT: 14px marlett; BORDER-LEFT: buttonshadow 1px solid; WIDTH: 22px; PADDING-TOP: 2px; BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 100%; TEXT-ALIGN: center }
.link_value { BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0); VISIBILITY: hidden; OVERFLOW-X: hidden; OVERFLOW: auto; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; POSITION: absolute }
.link_record0 { BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff; WIDTH: 100%; COLOR: #000; HEIGHT: 20px }
.link_record1 { BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058; WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px }
</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>
</HEAD>
<body text="#000000" onload="document.all.form1.reset()">
<div style="PADDING-RIGHT:10px;PADDING-LEFT:10px;PADDING-BOTTOM:10px;PADDING-TOP:10px;BORDER-BOTTOM:red 2px solid">模拟下拉框</div>
<form id="form1" onsubmit="alert(city.value)" runat="server">
<table>
<tr>
<td>
<div class="link_box" onselectstart="return false" style="WIDTH: 100px">
<div class="link_head" onclick="dropdown(value1)">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td>
<div class="link_text"><nobr><label id="text1">请选择？</label></nobr></div>
</td>
<td align="right" width="22">
<div onmouseup="this.className='link_arrow0'" class="link_arrow0" onmousedown="this.className='link_arrow1'"
onmouseout="this.className='link_arrow0'">6</div>
</td>
</tr>
</table>
</div>
<div class="link_value" id="value1" style="WIDTH: 500px; HEIGHT: 300px">
<asp:datagrid id="DataGrid1" runat="server" AutoGenerateColumns="False" Font-Size="12px" Width="100%"
ShowHeader="False">
<Columns>
<asp:BoundColumn DataField="Title" SortExpression="Title" DataFormatString="<img src='http://www.play78.com/blog/images/icon_admincp.gif' align='absmiddle'> {0}"></asp:BoundColumn>
<asp:BoundColumn DataField="CreateDate" SortExpression="CreateDate" HeaderText="" DataFormatString="{0:yyyy年MM月dd日}"></asp:BoundColumn>
</Columns>
</asp:datagrid>
<div id="mx">
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>北京市</label></div>
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>上海市</label></div>
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>河南省</label></div>
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>深圳市</label></div>
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>大连市</label></div>
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>云南省</label></div>
</div>
</div>
</div>
</td>
<td><input type="hidden" value="您尚未选择" name="city"> <input type="submit" value="确定">
</td>
</tr>
</table>
</form>
</body>
</HTML>
<HEAD>
<title>模拟下拉列表框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>BODY { FONT: 12px 宋体 }
TD { FONT: 12px 宋体 }
DIV { FONT: 12px 宋体 }
LABEL { PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; HEIGHT: 19px }
.link_box { CURSOR: default; TEXT-ALIGN: left }
.link_head { BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset; WIDTH: 100%; BORDER-BOTTOM: 2px inset; HEIGHT: 23px }
.link_text { PADDING-LEFT: 2px; BACKGROUND: #fff }
.link_arrow0 { BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BACKGROUND: buttonface; FONT: 14px marlett; BORDER-LEFT: 2px outset; WIDTH: 22px; BORDER-BOTTOM: 2px outset; HEIGHT: 100%; TEXT-ALIGN: center }
.link_arrow1 { BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 2px; BACKGROUND: buttonface; PADDING-BOTTOM: 0px; FONT: 14px marlett; BORDER-LEFT: buttonshadow 1px solid; WIDTH: 22px; PADDING-TOP: 2px; BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 100%; TEXT-ALIGN: center }
.link_value { BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0); VISIBILITY: hidden; OVERFLOW-X: hidden; OVERFLOW: auto; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; POSITION: absolute }
.link_record0 { BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff; WIDTH: 100%; COLOR: #000; HEIGHT: 20px }
.link_record1 { BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058; WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px }
</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>
</HEAD>
<body text="#000000" onload="document.all.form1.reset()">
<div style="PADDING-RIGHT:10px;PADDING-LEFT:10px;PADDING-BOTTOM:10px;PADDING-TOP:10px;BORDER-BOTTOM:red 2px solid">模拟下拉框</div>
<form id="form1" onsubmit="alert(city.value)" runat="server">
<table>
<tr>
<td>
<div class="link_box" onselectstart="return false" style="WIDTH: 100px">
<div class="link_head" onclick="dropdown(value1)">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td>
<div class="link_text"><nobr><label id="text1">请选择？</label></nobr></div>
</td>
<td align="right" width="22">
<div onmouseup="this.className='link_arrow0'" class="link_arrow0" onmousedown="this.className='link_arrow1'"
onmouseout="this.className='link_arrow0'">6</div>
</td>
</tr>
</table>
</div>
<div class="link_value" id="value1" style="WIDTH: 500px; HEIGHT: 300px">
<asp:datagrid id="DataGrid1" runat="server" AutoGenerateColumns="False" Font-Size="12px" Width="100%"
ShowHeader="False">
<Columns>
<asp:BoundColumn DataField="Title" SortExpression="Title" DataFormatString="<img src='http://www.play78.com/blog/images/icon_admincp.gif' align='absmiddle'> {0}"></asp:BoundColumn>
<asp:BoundColumn DataField="CreateDate" SortExpression="CreateDate" HeaderText="" DataFormatString="{0:yyyy年MM月dd日}"></asp:BoundColumn>
</Columns>
</asp:datagrid>
<div id="mx">
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>北京市</label></div>
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>上海市</label></div>
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>河南省</label></div>
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>深圳市</label></div>
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>大连市</label></div>
<div class="link_record0" onmouseover="hiLight(this)" onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>云南省</label></div>
</div>
</div>
</div>
</td>
<td><input type="hidden" value="您尚未选择" name="city"> <input type="submit" value="确定">
</td>
</tr>
</table>
</form>
</body>
</HTML>
