本文介绍了一种使用HTML、CSS和JavaScript实现自定义下拉框的方法。该方法通过鼠标点击事件展示和隐藏下拉选项，并实现了选项选择后的文本显示功能。
<!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>
textbox点击加载li数据
</title>
<style type="text/css">
#div ul{
list-style:none;
padding:0;
margin:0;
border:1px solid #000000;
width:100%;
position: absolute;
left: 0px;
top: 0px;
background-color:#FFFFFF;
z-index:200;
}
#div ul li{
width:300px;
padding:0;
background:#fff;
}
.select_box {
position: relative;
z-index:10;
}
.select_box select {
position:fixed;
z-index:100;
}
</style>
</head>
<body>
<select name="ctl00$mainContent$ddlRptName" id="ctl00_mainContent_ddlRptName" class="ddListNormal" style="width:148px;display:none;">
<option selected="selected" value=""></option>
<option value="01">aaaaaaaaaaaaa</option>
<option value="02">bbbbbbbbbbbbb</option>
<option value="04">ccccccccccccc</option>
<option value="05">ddddddddddddd</option>
<option value="06">eeeeeeeeeeeee</option>
<option value="07">fffffffffffff</option>
</select>
<div id="div" style=" width:100px; position:relative; z-index :20">
<input name="ctl00$mainContent$ddlRpt" type="text" id="ctl00_mainContent_ddlRpt" onClick="focusHandler(this)" onBlur="hideul()" />
<ul style='display:none;'>
<li title= onClick= clickHandler(this) onMouseOver= mouseoverHandler(this) onMouseOut= mouseoutHandler(this)> <span style='font-size:12px;'></span></li>
<li title=aaaaaaaaaaaaa onClick= clickHandler(this) onMouseOver= mouseoverHandler(this) onMouseOut= mouseoutHandler(this)> <span style='font-size:12px;'>aaaaaaaaaaaaa</span></li>
<li title=bbbbbbbbbbbbb onClick= clickHandler(this) onMouseOver= mouseoverHandler(this) onMouseOut= mouseoutHandler(this)> <span style='font-size:12px;'>bbbbbbbbbbbbb</span></li>
<li title=ccccccccccccc onClick= clickHandler(this) onMouseOver= mouseoverHandler(this) onMouseOut= mouseoutHandler(this)> <span style='font-size:12px;'>ccccccccccccc</span></li>
<li title=ddddddddddddd onClick= clickHandler(this) onMouseOver= mouseoverHandler(this) onMouseOut= mouseoutHandler(this)> <span style='font-size:12px;'>ddddddddddddd</span></li>
<li title=eeeeeeeeeeeee onClick= clickHandler(this) onMouseOver= mouseoverHandler(this) onMouseOut= mouseoutHandler(this)> <span style='font-size:12px;'>eeeeeeeeeeeee</span></li>
<li title=fffffffffffff onClick= clickHandler(this) onMouseOver= mouseoverHandler(this) onMouseOut= mouseoutHandler(this)> <span style='font-size:12px;'>fffffffffffff</span></li>
</ul>
</div>
<SCRIPT LANGUAGE="JavaScript">
var flag = false;
document.getElementById("div").getElementsByTagName('ul')[0].style.display = 'none';
function focusHandler(obj) {
if (obj.parentNode)
obj.parentNode.getElementsByTagName('ul')[0].style.display = '';
}
function clickHandler(obj) {
obj.parentNode.parentNode.getElementsByTagName("input")[0].value = obj.title;
obj.parentNode.style.display = "none";
}
function mouseoverHandler(obj) {
flag = true;
obj.style.cursor = 'default';
obj.style.backgroundColor = "#0066CC";
}
function mouseoutHandler(obj) {
flag = false;
obj.style.backgroundColor = "";
obj.style.border = "";
}
function hideul() {
if (flag == false) {
document.getElementById("div").getElementsByTagName('ul')[0].style.display = 'none';
} else {
return false;
}
}
</SCRIPT>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
