@_@ 分享 巧妙实现带下拉选框的文本框——大家来拍砖,哈
先粘出去看看效果!
之前这种 带下拉选框的文本框 的效果许多朋友都说用 Div 模拟实现,
在论坛灌了几天以后,感觉功力见涨,哈
今天看到有人问类似问题,俺之前尝试实现,但都以失败告终,
不过今天总算有成果了。
大家看看评评!
<!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>
<body>
<input type="text" id="tbInput" size="15"><div id="divSelect" style="border:0px solid blue;z-index:10;position:absolute;">
<SELECT id="Cats">
<OPTION>1 Calico
<OPTION>2 Tortie
<OPTION>3 Siamese
<OPTION>4 Calico
<OPTION>5 Calico
<OPTION>6 Tortie
<OPTION>7 Siamese
<OPTION>8 Calico
<OPTION>9 Calico
<OPTION>10 Tortie
<OPTION>11 Siamese
<OPTION>12 Calico
<OPTION>13 Calico
<OPTION>14 Tortie
<OPTION>15 Siamese
<OPTION>16 Calico
</SELECT>
</div>
<input type="button" id="btnSelect" value="Select"><br>
<p>“段落一”不会被挤下去!</p>
<script language="JavaScript" defer>
<!--
var oTb = document.getElementById("tbInput");
var oBtn = document.getElementById("btnSelect");
var oSel = document.getElementById("cats");
oSel.style.display = "none";
oTb.onclick = function()
{
oSel.style.display = "none";
};
oBtn.onclick = function()
{
var OptCount = oSel.options.length
oSel.size = OptCount > 10 ? 10 : OptCount;
oSel.style.display = "block";
};
oSel.onchange = function()
{
oTb.value = this.options[this.selectedIndex].text;
oSel.style.display = "none";
};
oSel.onblur = function()
{
oSel.style.display = "none";
};
//-->
</script>
</body>
</html>