<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0}
body{ font-family:Verdana; font-size:12px; line-height:1.8; padding:50px;}
form dt{ background:url(/article/UploadPic/20087/28/2008728133512977.gif) no-repeat left center;
width:193px;cursor:default; padding-left:5px;}
form .out{ background:#FFFFFF; color:#000000;}
form .move{ background:#000066; color:#FFFFFF}
form dl{text-align:left;}
form dd{ border:1px solid #000;position:absolute; width:195px; overflow:hidden;background:#fff; margin-top:-3px;}
form dd li{cursor:default; width:100%; padding-left:5px;}
</style>
</head>
<body>
<script language="javascript">
function AjaxSelectBox(v){
var dl = v.parentNode;
var dd = dl.getElementsByTagName("dd")[0];
var dt = dl.getElementsByTagName("dt")[0];
var lis = dl.getElementsByTagName("li");
var html = '';
for(var y=0; y<lis.length; y++){
html += '<li οnclick="SetSelectInput(this,1);" οnmοuseοut="SetSelectInput(this,2);" οnmοusemοve="SetSelectInput(this,3);" value="'+lis[y].value+'">' + lis[y].innerHTML + '</li>';
}
dl.getElementsByTagName("ul")[0].innerHTML = html;
dd.style.display = "block";
dl.onmouseout = function() {dd.style.display = "none";}
dd.onmouseover = function() {dd.style.display = "block";}
}
function SetSelectInput(v,flag){
var dl = v.parentNode;
while(dl.nodeName != 'DL'){
dl = dl.parentNode;
}
var input = dl.getElementsByTagName("input")[0];
var dd = dl.getElementsByTagName("dd")[0];
var dt = dl.getElementsByTagName("dt")[0];
dd.onmouseover = function() {dd.style.display = "block";}
v.onmouseover = function() {dd.style.display = "block";}
dd.onmouseout = function() {dd.style.display = "none"}
if(flag == 1){
input.value = v.attributes.getNamedItem("value").value;
dt.innerHTML = v.innerHTML;
dd.style.display = "none";
} else if(flag == 2){
v.className = 'out'; return;
} else{
v.className = 'move'; return;
}
}
</script>
<form>
<dl>
<dt οnclick="AjaxSelectBox(this)">------------请选择------------
</dt>
<dd style="display:none">
<ul>
<li value="1">this is 001.</li>
<li value="2">this is 002.</li>
<li value="3">this is 003.</li>
<li value="4">this is 004.</li>
<li value="5">this is 005.</li>
<li value="6">this is 006.</li>
<li value="7">this is 007.</li>
<li value="8">this is 008.</li>
<li value="9">this is 009.</li>
<li value="10">this is 010.</li>
</ul><input type="hidden" value="" />
</dd>
</dl>
<dl>
<dt οnclick="AjaxSelectBox(this)">------------请选择------------
</dt>
<dd style="display:none">
<ul>
<li value="1">this is 001.</li>
<li value="2">this is 002.</li>
<li value="3">this is 003.</li>
<li value="4">this is 004.</li>
<li value="5">this is 005.</li>
<li value="6">this is 006.</li>
<li value="7">this is 007.</li>
<li value="8">this is 008.</li>
<li value="9">this is 009.</li>
<li value="10">this is 010.</li>
</ul><input type="hidden" value="" />
</dd>
</dl>
<dl>
<dt οnclick="AjaxSelectBox(this)">------------请选择------------
</dt>
<dd style="display:none">
<ul>
<li value="1">this is 001.</li>
<li value="2">this is 002.</li>
<li value="3">this is 003.</li>
<li value="4">this is 004.</li>
<li value="5">this is 005.</li>
<li value="6">this is 006.</li>
<li value="7">this is 007.</li>
<li value="8">this is 008.</li>
<li value="9">this is 009.</li>
<li value="10">this is 010.</li>
</ul> <input type="hidden" value="" />
</dd>
</dl>
</form>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
