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

最新推荐文章于 2022-03-24 15:01:07 发布

最新推荐文章于 2022-03-24 15:01:07 发布 · 111 阅读

文章标签：

本文介绍了一种使用JavaScript实现的动态下拉菜单效果，通过监听点击事件展示和隐藏菜单，并支持选项选择后的反馈。

<html>
<head>
<title>add</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript">

function ShowName( sName )
{
document.getElementById('sel_class').value = sName;
}
function Div()
{
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';
var self = this;
this.IntervalID = setInterval( function(){self.DoShow();},10 );
this.bProcessing = true;

//隐藏select
var oSel = document.getElementsByTagName('select');
for( i = 0; i < oSel.length; i++ )
{
//oSel[i].style.visibility = 'hidden';
}
}
}
this.DoShow = function()
{
var nWidth = this.obj.offsetWidth;
var nHeight = this.obj.offsetHeight;
var nPerX = this.nStep;
var nPerY = nPerX / ( this.objWidth / this.objHeight );
var nTempX = nWidth + nPerX;
var nTempY = 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;
var self = this;
this.IntervalID = setInterval( function(){self.DoClose();},10 );
this.bProcessing = true;
}
}

this.DoClose = function()
{
var nWidth = this.obj.offsetWidth;
var nHeight = this.obj.offsetHeight;
var nPerX = this.nStep;
var nPerY = nPerX / ( this.objWidth / this.objHeight );
var nTempX = nWidth - nPerX;
var nTempY = 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
var oSel = document.getElementsByTagName('select');
for( i = 0; i < oSel.length; i++ )
{
oSel[i].style.visibility = 'visible';
}
}
}
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="98%" align="center" border="0">
<tbody>
<tr>
<td class="show_main">
<form onsubmit="return check()" action="?action=save" method="post">
<table cellspacing="1" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td id="errormsg" colspan="2">
</td>
</tr>
<tr>
<td class="form_label">
<label for="sel_class">
select</label>
</td>
<td class="form_input">
<input class="text" id="sel_class" onclick="oClassDiv.Show()" value="">
<div id="class">
</div>
<script type="text/javascript">
var sHTML = "<div style=\"width: 200px; height: 250px; border: 1px solid #000; background-color: #fff; position: absolute; left: 0px; top: 0px; cursor: default\">";
sHTML += "<div style=\"height: 20px; line-height: 20px; color: #fff; background-color: #a00d06; padding-left: 12px; font-weight: bold;\">";
sHTML += "select <span style=\"cursor: pointer; font-weight: normal;\" onclick=\"oClassDiv.Close();\">[close]</span></div>";
sHTML += "<div style=\"height:230px;line-height: 20px; overflow-y: scroll;\"><ul style=\"list-style: none; margin: 0;\">";
sHTML += "<li style='padding-left:12px;'><input type=radio name=class_id value=7 onclick='ShowName(\"11111\")' /> job</li>";
sHTML += "<li style='padding-left:12px;'><input type=radio name=class_id value=1 onclick='ShowName(\"22222\")' /> james</li>";
sHTML += "<li style='padding-left:12px;'><input type=radio name=class_id value=2 onclick='ShowName(\"33333\")' /> kobi</li>";
sHTML += "<li style='padding-left:12px;'><input type=radio name=class_id value=3 onclick='ShowName(\"44444\")' /> oneal</li>";
sHTML += "</ul></div>";
sHTML += "</div>";
var oClassDiv = new Div();
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>