|
|
simple implement.
option: support input as text
not support scroll.
<html><head><title>select demo</title><style>#selectText, #selectItemDiv {font-size: 10pt;}#selectText {padding-left: 7px;border: 0;width: 100px;height: 22px;line-height: 22px;background: url(images/select_bg.gif) no-repeat right;}#selectItemDiv {border: 1px solid #2b2bd3;border-top: none;border-radius: 0 0 10px 10px;height: 80px;overflow: auto;background-color: #ececf1;}#selectItemDiv ul {padding: 2px;margin: 0;}#selectItemDiv li {list-style: outside none;padding-left: 5px;height: 22px;line-height: 22px;cursor: default;}#selectItemDiv li:hover {background-color: #ccc;}</style><script>var $=function(id){return document.getElementById(id);}function showItem(txt, n){var x=txt.offsetLeft;var y=txt.offsetTop;var w=txt.offsetWidth;var h=txt.offsetHeight;var fixY=-1;var fixW=-2;var d=$("selectItemDiv");if(d.style.display=="block")return;d.style.left=x+"px";d.style.top=y+h+fixY+"px";d.style.width=w+fixW+"px";d.style.height=22*n+4+"px";d.style.display="block";txt.style.backgroundImage="url(images/select_bg2.gif)";}function hiddenItem(li){var d=$("selectItemDiv");if(null!=li)$("selectText").value=li.innerHTML;$("selectText").style.backgroundImage="url(images/select_bg.gif)";$("selectText").focus();d.style.display="none";}function selectKey(e){var key=e.keyCode;if(13==key || 27==key)hiddenItem();}</script></head><body>select : <div id="selectDiv"><input type="text" id="selectText" onkeyup="selectKey(arguments[0])" /><div id="selectItemDiv" style="position: absolute; display: none;"><ul><li >JAVA</li><li >HTML</li><li >JAVASCRIPT</li><li >CSS</li><li >PHOTOSHOP</li><li >ILLUSTRATOR</li></ul></div></div><hr size="1" /><select><option value="1">1</option><option value="2">a</option><option value="3">b</option><option value="4">2</option></select><br /><input type="text" id="txt" /></body></html>
result
to be continue... |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡