无聊没事干,仿下拉选择框 <!-- Description: 自定义下拉选择框,仿下拉选择框 Author: xiaolong8 Date: 2009-9-20 13:48:55 --> <mce:style><!-- .a_opt{ margin:0px; padding:0px 0px 0px 2px; width:100%; text-decoration:none; text-align:left; font-size:13px; cursor:default; color:#000000; } .a_opt_hover{ margin:0px; padding:0px 0px 0px 2px; width:100%; text-decoration:none; text-align:left; font-size:13px; cursor:default; color:#FFFFFF; background-color:#69B1BF; } .a_opt_slcted{ margin:0px; padding:0px 0px 0px 2px; width:100%; text-decoration:none; text-align:left; color:#FFFFFF; background-color:#69B1BF; cursor:default; font-size:13px; } .slct_label{ width:200px; margin:0px 0px 0px 0px; border-width:1px; border-style:outset; border-color:#000000; font-size:13px; } .slct_list{ margin:0px 0px 0px 0px; width:200px; height:auto; background-color:#FFFFFF; overflow:auto; position:absolute; z-index:99999999; border-width:1px; border-style:solid; border-color:#000000; display:none; } --></mce:style><style mce_bogus="1"> .a_opt{ margin:0px; padding:0px 0px 0px 2px; width:100%; text-decoration:none; text-align:left; font-size:13px; cursor:default; color:#000000; } .a_opt_hover{ margin:0px; padding:0px 0px 0px 2px; width:100%; text-decoration:none; text-align:left; font-size:13px; cursor:default; color:#FFFFFF; background-color:#69B1BF; } .a_opt_slcted{ margin:0px; padding:0px 0px 0px 2px; width:100%; text-decoration:none; text-align:left; color:#FFFFFF; background-color:#69B1BF; cursor:default; font-size:13px; } .slct_label{ width:200px; margin:0px 0px 0px 0px; border-width:1px; border-style:outset; border-color:#000000; font-size:13px; } .slct_list{ margin:0px 0px 0px 0px; width:200px; height:auto; background-color:#FFFFFF; overflow:auto; position:absolute; z-index:99999999; border-width:1px; border-style:solid; border-color:#000000; display:none; }</style> <body> <form name="fr_person"> <mce:script type="text/javascript"><!-- var arrOpts=new Array(); var slct=document.createElement("label"); var slctList=document.createElement("div"); var isListBlur=false; function constructSlct(){ //初始化选项框各元素 slct.name="labelSlct"; slct.selectedIndex=0; slct.value="-1";//选项框的值 slct.className="slct_label"; slct.οnclick=function(){ (slctList.style.display!="block")&&!isListBlur?showOpts():slctList.style.display="none"; isListBlur=false; } slct.οnfοcus=function(){ isListBlur=true; } slctList.id="optsDiv"; slctList.className="slct_list"; slctList.οnblur=function(){ isListBlur=true; this.style.display='none'; } //生成选项 for(var i=0;i<100;i++){ var aOpt=document.createElement("a"); aOpt.id="aOpt_"+i; aOpt.index=i; aOpt.value=i; aOpt.innerHTML="opt_"+i; aOpt.className="a_opt"; aOpt.οnmοuseοver=function(){ arrOpts[slct.selectedIndex].className="a_opt"; this.className="a_opt_hover"; } aOpt.οnmοuseοut=function(){ this.className="a_opt"; } aOpt.οnclick=function(){ slct.value=this.value; slct.innerHTML=this.innerHTML; slct.selectedIndex=this.index; slctList.style.display='none'; this.className="a_opt_slcted"; //alert(slct.value); } arrOpts.push(aOpt); } //加入选项到列表 for(var i=0;i<arrOpts.length;i++){ slctList.appendChild(arrOpts[i]); } }//constructSlct function showOpts(){ slctList.style.top=slct.offsetTop+slct.offsetHeight; slctList.style.left=slct.offsetLeft; arrOpts[slct.selectedIndex].className="a_opt_slcted"; slctList.style.display='block'; if(slctList.offsetHeight>300){//当列表长度大于300,则自动加上滚动条 slctList.style.height="300"; slctList.style.overflow="auto"; } slctList.focus();//为失去焦点触发隐藏列表作准备 isListBlur=false; }//showOpts function addSlctTo(that){ that.appendChild(slct); that.appendChild(slctList); } constructSlct(); document.write('<label id="slct" width="200px"></label>'); addSlctTo(document.all.slct); // --></mce:script> <select style="width:200px;"> <option value="ab_1">opt_1</option> <option value="ab_2">opt_2</option> <option value="ab_3" selected>opt_3</option> <option value="ab_4">opt_4</option> <option value="ab_5">opt_5</option> <option value="ab_6">opt_6</option><option value="ab_1">opt_1</option> <option value="ab_2">opt_2</option><option value="ab_4">opt_4</option> <option value="ab_5">opt_5</option> <option value="ab_6">opt_6</option><option value="ab_1">opt_1</option> <option value="ab_2">opt_2</option><option value="ab_4">opt_4</option> <option value="ab_5">opt_5</option> <option value="ab_6">opt_6</option><option value="ab_1">opt_1</option> <option value="ab_2">opt_2</option><option value="ab_4">opt_4</option> <option value="ab_5">opt_5</option> <option value="ab_6">opt_6</option><option value="ab_1">opt_1</option> <option value="ab_2">opt_2</option><option value="ab_4">opt_4</option> <option value="ab_5">opt_5</option> <option value="ab_6">opt_6</option><option value="ab_1">opt_1</option> <option value="ab_2">opt_2</option> </select> </form> </body>