模拟select下拉框

技术文章

模拟select下拉框

时间：2009-03-16 点击：1424

<!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=gb2312" />
<title>模拟select下拉框</title>
<style>
*{ margin:0; padding:0}
body{ font-family:Verdana; font-size:12px; line-height:1.8; padding:50px;}
form dt{ background:url(http://www.it214.net/javascript/325.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 onclick="SetSelectInput(this,1);" onmouseout="SetSelectInput(this,2);" onmousemove="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 onclick="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>

一款不错的网页换肤特效

asp.net中英文等多语言网站切换

把html代码转成js代码

省略号显示太长的文本

javascript 判断图片显示完成

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：