select virtual implement

伊苏

浏览: 108562 次
性别:
来自: 深圳

最近访客更多访客>>

liuqu11

xphoenix

rubskin

shanmeimeia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

html javascript css

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" onclick="showItem(this, 6)" onfocus="showItem(this, 6)" onkeyup="selectKey(arguments[0])" />
			<div id="selectItemDiv" style="position: absolute; display: none;">
				<ul>
					<li onclick="hiddenItem(this)">JAVA</li>
					<li onclick="hiddenItem(this)">HTML</li>
					<li onclick="hiddenItem(this)">JAVASCRIPT</li>
					<li onclick="hiddenItem(this)">CSS</li>
					<li onclick="hiddenItem(this)">PHOTOSHOP</li>
					<li onclick="hiddenItem(this)">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