select virtual implement

最新推荐文章于 2024-04-23 09:35:40 发布

ys_r14

最新推荐文章于 2024-04-23 09:35:40 发布

阅读量117

点赞数

文章标签： html javascript css ViewUI

本文链接：https://blog.csdn.net/ys_r14/article/details/84014998

版权

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

[img]http://dl.iteye.com/upload/attachment/551896/3d300373-350a-324e-8bec-2c9afdbbe634.jpg[/img]

to be continue...

ys_r14

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select virtual implement

simple implement.option: support input as textnot support scroll.[code="java"] select demo #selectText, #selectItemDiv { font-size: 10pt; } #selectText { padd...
复制链接

扫一扫