<!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>
