文本框代替下拉框

来源：互联网发布：mac 不用雷电接口编辑：程序博客网时间：2024/05/06 08:41

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>TestByRQ</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style>
</style>
<script language="javascript">
<!--
var popUp;

function Show(obj)
{
popUp = new PopUp();
popUp.CreatePopUp();
popUp.PositionItem(obj);
}

function Select(obj)
{
try
{
if ( popUp.IsClosed() )
{
popUp.CreatePopUp();
}
else
{
popUp.PositionItem(obj);
}
}
catch ( e )
{}

if ( popUp == undefined )
{
popUp = new PopUp();
popUp.CreatePopUp();
}
}

function PopUp()
{
var oPopup;
var isClosed = true;
}

PopUp.prototype.IsClosed = function()
{
return isClosed;
}

PopUp.prototype.CreatePopUp = function()
{
oPopup = window.createPopup();

oPopup.document.body.onunload = function()
{
isClosed = true;
var div = oPopup.document.getElementsByTagName('div');
var spans = div[0].getElementsByTagName('span');

for ( var i = 0; i < spans.length; i++ )
{
if ( spans[i].style.background.toLowerCase() == '#e1ecfc' )
{
document.getElementById('textbox').value = spans[i].innerText;
document.getElementById('hidden').value = spans[i].getElementsByTagName('hidden')[0].value;

return;
}
}

document.getElementById('textbox').value = '';
document.getElementById('hidden').value = '';
}

oPopup.document.body.onselectstart = function()
{
return false;
}

oPopup.document.body.oncontextmenu = function()
{
return false;
}

var oDocument = oPopup.document;
var oBody = oPopup.document.body;
var element = window.event.srcElement;
var left = element.getBoundingClientRect().left;
var top = element.getBoundingClientRect().top + element.offsetHeight;
var width = element.offsetWidth;

var oDiv = oDocument.createElement('div');
oBody.appendChild(oDiv);

oDiv.style.position = 'absolute';
oDiv.style.zIndex = 9999;
oDiv.style.border = '1px solid #CCCCCC';
oDiv.style.overflow = 'auto';
oDiv.style.width = '100%';
oDiv.style.height = '100%';
oDiv.style.left = 0;
oDiv.style.top = 0;

var oSpan;
var oHidden;

// 绑定数据
for ( var i = 0; i < 100; i++ )
{
oSpan = oDocument.createElement('span');
oDiv.appendChild(oSpan);

oSpan.style.border = '1px solid #F5F5F5';
oSpan.style.height = '20px';
oSpan.style.width = '100%';
oSpan.innerHTML = 'test' + i;
oSpan.attachEvent('onclick', this.SelectItem);

oSpan.onmouseover = function()
{
this.style.background = '#E1ECFC';
}

oSpan.onmouseout = function()
{
this.style.background = '';
}

oHidden = oDocument.createElement('hidden');
oSpan.appendChild(oHidden);
oHidden.value = i + 'test';
}

oPopup.show(left, top, width, 227, window.document.body);
isClosed = false;
}

PopUp.prototype.SelectItem = function()
{
var div = oPopup.document.getElementsByTagName('div');
var spans = div[0].getElementsByTagName('span');

for ( var i = 0; i < spans.length; i++ )
{
spans[i].style.background = '';
}

// 获取 createPopup 里面的事件源
var element = oPopup.document.parentWindow.event.srcElement;
element.style.background = '#E1ECFC';
document.getElementById('textbox').value = element.innerText;
document.getElementById('hidden').value = element.getElementsByTagName('hidden')[0].value;
oPopup.hide();
}

PopUp.prototype.PositionItem = function(obj)
{
var text = obj.value;
varlength = text.length;
var div = oPopup.document.getElementsByTagName('div');
var spans = div[0].getElementsByTagName('span');

for ( var i = 0; i < spans.length; i++ )
{
spans[i].style.background = '';
}

for ( var i = 0; i < spans.length; i++ )
{
if ( length > 0 && spans[i].innerHTML.substr(0, length) == text )
{
spans[i].style.background = '#E1ECFC';
oPopup.document.getElementsByTagName('div')[0].scrollTop = spans[i].offsetTop - spans[i].offsetHeight;
break;
}
}
}
//-->
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center">
<input type="text" style="WIDTH:180px" id="textbox" onmousedown="javascript:Show(this);" onkeyup="javascript:Select(this);">
<input type="hidden" id="hidden" style="WIDTH:0px;HEIGHT:0px"> <input type="button" value="Button" onclick="javascript:alert(document.getElementById('textbox').value + '/' + document.getElementById('hidden').value)">
</td>
</tr>
</table>
</form>
</body>
</HTML>