电脑技术学习

Javascrip中既是text又是select属性的输入

dn001

<!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:e­xpression(
;;;;;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
varclose_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:e­xpression(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>