无刷新点文本框，自动出现下拉框

最新推荐文章于 2025-03-15 09:10:17 发布

最新推荐文章于 2025-03-15 09:10:17 发布 · 120 阅读

文章标签：

本文介绍了一种使用JavaScript实现的动态下拉菜单效果，通过监听点击事件展示和隐藏菜单，并利用定时器逐步调整菜单的尺寸以达到平滑展开和收起的效果。文中详细解释了如何创建一个可复用的下拉菜单组件。

<html>
<head>
<title>add</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<scripttype="text/javascript">

functionShowName(sName)
{
document.getElementById('sel_class').value=sName;
}
functionDiv()
{
this.obj=null;
this.objWidth=0;
this.objHeight=0;
this.IntervalID=null;
this.bProcessing=false;
this.bOpen=false;
this.nStep=12;

this.Init=function(sValue)
{
if(!this.obj)return;
this.obj.innerHTML=sValue;
this.obj.style.display='none';
this.obj.style.position='absolute';
this.obj.style.overflow='hidden';
}
this.Show=function()
{
if(!this.bProcessing&&!this.bOpen)
{
if(!this.obj)return;
this.obj.style.width='0px';
this.obj.style.height='0px';
this.obj.style.display='block';
this.obj.style.zIndex='1';
varself=this;
this.IntervalID=setInterval(function(){self.DoShow();},10);
this.bProcessing=true;

//隐藏select
varoSel=document.getElementsByTagName('select');
for(i=0;i<oSel.length;i++)
{
//oSel[i].style.visibility='hidden';
}
}
}
this.DoShow=function()
{
varnWidth=this.obj.offsetWidth;
varnHeight=this.obj.offsetHeight;
varnPerX=this.nStep;
varnPerY=nPerX/(this.objWidth/this.objHeight);
varnTempX=nWidth+nPerX;
varnTempY=nHeight+nPerY;
this.obj.style.width=nTempX+"px";
this.obj.style.height=nTempY+"px";
if(this.obj.offsetWidth>=this.objWidth||this.obj.offsetHeight>=this.objHeight)
{
this.obj.style.width=this.objWidth+"px";
this.obj.style.height=this.objHeight+"px";
clearInterval(this.IntervalID);
this.IntervalID=null;
this.bProcessing=false;
this.bOpen=true;
}
}

this.Close=function()
{
if(!this.bProcessing&&this.bOpen)
{
if(!this.obj)return;
varself=this;
this.IntervalID=setInterval(function(){self.DoClose();},10);
this.bProcessing=true;
}
}

this.DoClose=function()
{
varnWidth=this.obj.offsetWidth;
varnHeight=this.obj.offsetHeight;
varnPerX=this.nStep;
varnPerY=nPerX/(this.objWidth/this.objHeight);
varnTempX=nWidth-nPerX;
varnTempY=nHeight-nPerY;
if(nTempX>0&&nTempY>0)
{
this.obj.style.width=nTempX+"px";
this.obj.style.height=nTempY+"px";
}
else
{
this.obj.style.display='none';
clearInterval(this.IntervalID);
this.IntervalID=null;
this.bProcessing=false;
this.bOpen=false;

//显示select
varoSel=document.getElementsByTagName('select');
for(i=0;i<oSel.length;i++)
{
oSel[i].style.visibility='visible';
}
}
}
}
</script>
</head>
<body>
<tablecellspacing="0"cellpadding="0"width="98%"align="center"border="0">
<tbody>
<tr>
<tdclass="show_main">
<formonsubmit="returncheck()"action="?action=save"method="post">
<tablecellspacing="1"cellpadding="0"width="100%"border="0">
<tbody>
<tr>
<tdid="errormsg"colspan="2">
</td>
</tr>
<tr>
<tdclass="form_label">
<labelfor="sel_class">
select</label>
</td>
<tdclass="form_input">
<inputclass="text"id="sel_class"onclick="oClassDiv.Show()"value="">
<divid="class">
</div>
<scripttype="text/javascript">
varsHTML="<divstyle=\"width:200px;height:250px;border:1pxsolid#000;background-color:#fff;position:absolute;left:0px;top:0px;cursor:default\">";
sHTML+="<divstyle=\"height:20px;line-height:20px;color:#fff;background-color:#a00d06;padding-left:12px;font-weight:bold;\">";
sHTML+="select<spanstyle=\"cursor:pointer;font-weight:normal;\"onclick=\"oClassDiv.Close();\">[close]</span></div>";
sHTML+="<divstyle=\"height:230px;line-height:20px;overflow-y:scroll;\"><ulstyle=\"list-style:none;margin:0;\">";
sHTML+="<listyle='padding-left:12px;'><inputtype=radioname=class_idvalue=7onclick='ShowName(\"11111\")'/>job</li>";
sHTML+="<listyle='padding-left:12px;'><inputtype=radioname=class_idvalue=1onclick='ShowName(\"22222\")'/>james</li>";
sHTML+="<listyle='padding-left:12px;'><inputtype=radioname=class_idvalue=2onclick='ShowName(\"33333\")'/>kobi</li>";
sHTML+="<listyle='padding-left:12px;'><inputtype=radioname=class_idvalue=3onclick='ShowName(\"44444\")'/>oneal</li>";
sHTML+="</ul></div>";
sHTML+="</div>";
varoClassDiv=newDiv();
oClassDiv.objWidth=202;
oClassDiv.objHeight=252;
oClassDiv.obj=document.getElementById('class');
oClassDiv.Init(sHTML);
</script>
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>