带下拉框的文本框

最新推荐文章于 2024-06-27 10:28:29 发布

iteye_4195

最新推荐文章于 2024-06-27 10:28:29 发布

阅读量313

点赞数

文章标签： javascript ViewUI

带下拉框的文本框

for(var IDx=0,IDy='';document.getElementById(m_strTextselectDiv)!=null;IDx++,IDy=IDx){
m_strTextselectDiv=(document.getElementById(m_strTextselectDiv + IDy)==null)?m_strTextselectDiv + IDy:m_strTextselectDiv
}
document.write ('<div id="' + m_strTextselectDiv + '" style="position: absolute;cursor: default;border: 1px solid #B2B2B2;background-color: #fff;display: none;"></div>')
// 获取对象的坐标
function getPosition(Obj)
{
try{
for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft,Obj=Obj.offsetParent);
return {left:sumLeft,top:sumTop}
}catch(e){}
}
//处理Div中的选项/* 某个选项，输入框的ID号 */
function divOnmoveover(obj,objText)
{
var MM_objText=document.getElementById(objText)

var objChilddiv=obj.parentNode.getElementsByTagName("div")
for(var x=0;x<objChilddiv.length;x++){objChilddiv[x].style.cssText=''}
obj.style.cssText='background-color: #330066;color: #ffffff;'

obj.οnclick=function(){
m_intTextSelectIn=false
if(ie)
{MM_objText.value=obj.outerText}
else
{MM_objText.value=obj.textContent}
MM_objText.focus()
MM_objText.blur()
}
}

// 隐藏被ID为objID的对象（层）遮挡的所有select
function HideOverSels(objID)
{
var sels = document.getElementsByTagName('select');
for (var i = 0; i < sels.length; i++)
if (Obj1OverObj2(document.getElementById(objID), sels[i]))
sels[i].style.visibility = 'hidden';
else
sels[i].style.visibility = 'visible';
}

//判断obj1是否遮挡了obj2
function Obj1OverObj2(obj1, obj2)
{
var pos1 = getPosition(obj1)
var pos2 = getPosition(obj2)
var result = true;
var obj1Left = pos1.left - window.document.body.scrollLeft;
var obj1Top = pos1.top - window.document.body.scrollTop;
var obj1Right = obj1Left + obj1.offsetWidth;
var obj1Bottom = obj1Top + obj1.offsetHeight;
var obj2Left = pos2.left - window.document.body.scrollLeft;
var obj2Top = pos2.top - window.document.body.scrollTop;
var obj2Right = obj2Left + obj2.offsetWidth;
var obj2Bottom = obj2Top + obj2.offsetHeight;

if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
obj1Left >= obj2Right || obj1Top >= obj2Bottom)

result = false;
return result;
}

</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 下拉输入框整理 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script language="javascript" type="text/javascript" src="textselect.js"></script>
<body style="font-size:12px">
<table width="750" border="1" cellspacing="1" cellpadding="3">
<tr></tr>
<tr>
<td> </td>
<td><input type="text" name="input" size="10" onFocus="javascript:showSelect(this,'select1')">
<select name="select1" id="select1" style="display: none" disabled>
<option value="1">1</option>
<option value="2">2</option>

</select>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="text" name="" id="a" οnfοcus="javascript:showSelect(this,'select2')"><select name="select2" id="select2" style="display: none" disabled>
<option value="a">a</option>
<option value="b">b</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>