<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> /* CSS Document */ /* for input_dropMenu*/ body{ line-height:10px; SCROLLBAR-FACE-COLOR: #eeeedd; SCROLLBAR-HIGHLIGHT-COLOR: #eeeedd; SCROLLBAR-SHADOW-COLOR: #666677; SCROLLBAR-3DLIGHT-COLOR: #666677; SCROLLBAR-ARROW-COLOR: #666677; SCROLLBAR-TRACK-COLOR: #efefef; SCROLLBAR-DARKSHADOW-COLOR: #eeeedd; } div{ font-size:9pt; } .dropMenu{ overflow:auto; overflow-x:visible; height:100%; border-top:1px solid #aaaabb; border-left:1px solid #aaaabb; border-right:1px solid #666677; border-bottom:2px solid #666677; background-color:#fdfdfd; FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=#eeeedd); white-space:nowrap; } .dropMenu div{ cursor:Default; color:#666677; padding:1px 2px 1px 2px; padding-top:2px; script1:expression( onmouseover=function(){ this.style.background="#0A246A" this.style.fontWeight="normal" this.style.color="white" this.style.paddingLeft="3px" }, onmouseout=function(){ this.style.background="none" this.style.fontWeight="normal" this.style.color="#666677" this.style.paddingLeft="2px" }, onclick=function(){ choose_dropMenu(this.parentNode.style.parent1,this) } ); } </style> </head> <script language="JavaScript"> // JavaScript Document /* === for input_dropMenu === === gotCode 2004-9-21 === */ function drawShadowDiv(){ sDiv = '<div id="shadowDiv" '+ 'style="'+ 'position:absolute;'+ 'left:0px;top:0px;'+ 'z-index:1;'+ 'background-color:#2C6C85;'+ 'layer-background-color:#2C6C85;'+ 'display:none;'+ 'FILTER:progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=10,finishOpacity=20,startX=0,finishX=0,startY=0,finishY=100);'+ 'border:1px solid skyblue;'+ '"></div>' document.write(sDiv) } drawShadowDiv() function giveItShaow( which , sDiv ,type ){ if( type == "show" ){ sDiv.style.zIndex = which.style.zIndex sDiv.style.left = which.offsetLeft + which.parentNode.offsetLeft + 2; sDiv.style.top = which.offsetTop + which.parentNode.offsetTop + 3; sDiv.style.width = which.offsetWidth ; sDiv.style.height = which.offsetHeight ; sDiv.style.display = ""; }else{ sDiv.style.display = "none" sDiv.style.zIndex = 1 } } //===显示下拉框=== /* current_dropMenu = 页面当前下拉框的ID close_dropMenu = 是否可以关闭下拉框 dropMenuGo = setTimeout的变量 */ var current_dropMenu = null var close_dropMenu = true var dropMenuGo = null function show_dropMenu( which ){ current_dropMenu = which if( dropMenuGo != null ){ clearTimeout(dropMenuGo) } //info.innerText = which.style.script1 eval("outSide_"+which.id).style.display = "" which.style.display = "" which.scrollTop = 0 marginTop = parseInt(which.style.marginTop) if( marginTop < -3 ){ which.style.marginTop = marginTop + Math.round(( 0 - marginTop )/3) }else if( marginTop >= -3 && marginTop < 0 ){ which.style.marginTop = marginTop + 1 } if( marginTop >= 0 ){ clearTimeout(dropMenuGo) giveItShaow(which,shadowDiv,'show') return } dropMenuGo = setTimeout("show_dropMenu( "+which.id+" )",10) // } //===隐藏下拉框=== function hide_dropMenu(){ if( current_dropMenu != null ){ if( close_dropMenu ){ clearTimeout(dropMenuGo) current_dropMenu.style.display = "none" eval("outSide_"+current_dropMenu.id).style.display = "none" current_dropMenu.style.marginTop = current_dropMenu.parentNode.offsetHeight*(-1) giveItShaow(current_dropMenu,shadowDiv,'hide') } } } //===选择下拉框的值=== function choose_dropMenu( which , self ){ close_dropMenu = true hide_dropMenu() //eval(which).document.body.innerText = self.innerText.substr(0,self.innerText.length-1) eval(which).value = self.innerText } //===除前后空格=== function trim(str){ if( str.substr(0,1)==" "){ str = str.substr(1) } if( str.substr(str.length-1,1)==" "){ str = str.substr(0,str.length-2) } return str } function replaceFilters( str ){ //str = str.replace(/ /g,"") str = trim(str) str = str.replace(/=/g,':') str = str.replace(/:/g,':"') str = str.replace(/ /g,' ') str = str.replace(/:"\/\//g,'://') str = str.replace(/javascript:"/g,'javascript:') str = str.replace(/,/g,'",') str = str + '"' str = str.replace(/""/g,'"') str = "{" + str + "}" return str } /* type = 变量名称 defaultVariables = 默认的值（不能为空） */ function setFilters( type , defaultVariables ){ if( filters[type] == undefined ){ if( defaultVariables == undefined ){ defaultVariables = "" } eval( type + "=defaultVariables" ) }else{ eval( type + "=filters[type]" ) } } var getStr , cTmpStr function Separate_Str(){ getStr = "" for ( i = 0; i < cTmpStr.length ; i ++ ){ if ( cTmpStr.substr(i,1) == " " ){ cTmpStr = cTmpStr.substr(getStr.length+1) return getStr } getStr = getStr + cTmpStr.substr(i,1) }return getStr } //===drawDropMenu=== /* iAutoID = 自动编号 id = 输入框的值 */ var iAutoID = 0; function SS_drawDropMenu( filter ){ iAutoID++ if( filter == undefined ){ filters = {} }else{ eval( "filters=" + replaceFilters( filter )) } setFilters( "id" , "inputFrame"+iAutoID ) setFilters( "form" , "" ) setFilters( "maxlength" , "" ) setFilters( "cItem" , "没有选项" ) setFilters( "value" , "" ) setFilters( "startColor" , "white" ) setFilters( "endColor" , "#eeeedd" ) setFilters( "onfocus" , "'javascript:;'" ) setFilters( "onblur" , "'javascript:;'" ) setFilters( "onmouseover" , "'javascript:;'" ) setFilters( "onmouseout" , "'javascript:;'" ) setFilters( "onmouseup" , "'javascript:;'" ) setFilters( "onmousedown" , "'javascript:;'" ) setFilters( "onkeyup" , "'javascript:;'" ) setFilters( "onkeydown" , "'javascript:;'" ) setFilters( "onchange" , "'javascript:;'" ) if( form != "" ){ parent1 = form+"."+id }else{ parent1 = id } //---建立下拉框选项的html语句--- var itemCount //-下拉框选项的循环次数 var itemHtml = "" //-html语句 var dropMenuHeight = "" var inputSize = 0 //-下拉框的高度 itemCount = cItem.split(' ').length cTmpStr = cItem for( var i = 0 ; i < itemCount ; i++ ){ menuValue = Separate_Str() itemHtml = itemHtml + '<div>'+menuValue+'</div>\n' if( menuValue.length > inputSize ){ inputSize = menuValue.length } } if( itemCount < 5){ dropMenuHeight = (17 * itemCount+3) }else{ dropMenuHeight = 88 } setFilters( "size" , inputSize*2 ) //---end--- oHtml='<div id="input_dropMenu'+id+'" style="display:inline;height:21px;">\n'+ '<table border="0" cellspacing="0" cellpadding="0">\n'+ '<tr>\n'+ '<td style="font-size:9pt;border:1px solid black;border-right:0px;">\n'+ '<input name="'+id+'" type="text" value="'+value+'" size="'+size+'" maxlength="'+maxlength+'" style="font-size:9pt;border:0px solid black;" '+ ' onfocus=' +onfocus+ ' onblur=' +onblur+ ' onmouseover=' +onmouseover+ ' onmouseout=' +onmouseout+ ' onmouseup=' +onmouseup+ ' onmousedown=' +onmousedown+ ' onkeyup=' +onkeyup+ ' onkeydown=' +onkeydown+ ' onchange=' +onchange+ '>'+ '</td>\n'+ '<td width="16px" style="font-size:9pt;border:1px solid black;border-left:0px;border-right:0px;">\n'+ '<div style="'+ 'font-family:webdings;'+ 'overflow:hidden;'+ 'height:18;'+ 'margin-left:-1px;'+ 'border:2px solid outset;'+ 'FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='+startColor+',endColorStr='+endColor+');'+ '"'+ ' onmousedown="this.style.border=\'2px inset\'"'+ ' onmouseup="this.style.border=\'2px outset\'"'+ ' onmouseover="this.style.border=\'2px outset\'"'+ ' onmouseout="this.style.border=\'2px outset\'"'+ '>\n'+ '<div style="'+ 'font-size:9pt;'+ 'margin-top:-3px;'+ 'margin-left:1px;'+ 'cursor:hand;'+ 'color:#444444'+ '"'+ ' onClick="show_dropMenu(dropMenu'+id+')"'+ ' onmousedown="this.style.marginLeft=\'2px\';"'+ ' onmouseup="this.style.marginLeft=\'1px\'"'+ ' onselectstart="return false"'+ '>6</div>\n'+ '</div>\n'+ '</td>\n'+ '</tr>\n'+ '<tr>\n'+ '<td colspan="2">\n'+ '<div id="outSide_dropMenu'+id+'"'+ ' class="outSideDropMenu" '+ ' onselectstart="return false"'+ 'style="'+ 'display:none;'+ 'position:absolute;'+ 'z-index:21;'+ 'margin-top:-1px;'+ 'height:'+dropMenuHeight+'px;'+ 'width:100%;'+ 'overflow:hidden;'+ 'overflow-x:visible;'+ 'border:0px solid black;'+ '">\n'+ '<div id="dropMenu'+id+'" class="dropMenu" style="margin-top:expression(this.parentNode.offsetHeight*(-1));parent1:'+parent1+'" onMouseover="close_dropMenu=false;" onMouseout="close_dropMenu=true;">\n'+ itemHtml+ '</div>\n'+ '</div>\n'+ '</td>\n'+ '</tr>\n'+ '</table>\n'+ '</div>\n' document.write(oHtml) } </script> <body onMousedown="hide_dropMenu();"> <form name="form1" method="post" action=""> 姓名: <input name="cName" type="text" id="cName" size="10"> <br> 年龄: <input name="iAge" type="text" id="iAge" size="10"> <br> 职位: <script>SS_drawDropMenu('id=kkk,form=form1,cItem=科员 科长 所长 局长')</script> <script>SS_drawDropMenu('id=kkk2,form=form1,cItem=科员 科长 所长 局长')</script> <input name="dd" type="button" value="提交" onclick="alert(form1.kkk.value)"> </form> <p> </p></body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
