Js模拟select选择框，参照IE8样式

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js模拟select选择框</title>
<style type="text/css">
*{padding:0; margin:0;}
ul{list-style:none; margin:10px 30px; position:relative;}
ul li{position:relative; width:202px;height:22px; }
.text{width:200px; height:20px; position:absolute; left:0; top:0;border:1px solid #ccc; line-height:20px; font-size:14px; cursor:default;}
.btn{position:absolute;width:17px; height:20px; right:1px; top:1px; display:inline-block; background:url(//ku.shouce.ren/files/images/201601/56a363ca23e76.jpg) no-repeat;}
.btnhover{background:url(//ku.shouce.ren/files/images/201601/56a363cacfcc1.jpg);}
.select{border:1px solid #666;width:199px; height:auto; position:absolute; top:21px; display:none;background:#fff;}
.select p{line-height:16px; font-size:13px; cursor:default; position:relative;}
.select .hover{background:#3399FD;}
</style>
</head>
<body>
<h2>传统样式</h2>
<select style="width:200px; margin:10px 30px;height:22px; border:1px solid #ccc; font-size:14px; z-index:0;"><option>select1</option><option>select2</option><option>select3</option><option>select4</option></select>	
<h2>Js模拟的select</h2>
<ul>
	<li><input type="text" class="text" onclick="beginSelect(this);" /><span class="btn" onmousedown="beginSelect(this)"></span></li>
	<li class="select">
		<p>select1</p>
		<p>select2</p>
		<p>select3</p>
		<p>select4</p>
	</li>
</ul>
<script type="text/javascript">
function beginSelect(elem){
	if(elem.className == "btn"){
		elem.className = "btn btnhover"
		elem.onmouseup = function(){
			this.className = "btn"
		}
	}
	var ul = elem.parentNode.parentNode;
	var li = ul.getElementsByTagName("li");
	var selectArea = li[li.length-1];
	if(selectArea.style.display == "block"){
		selectArea.style.display = "none";
	}
	else{
		selectArea.style.display = "block";
		mouseoverBg(selectArea);
	}
}
function mouseoverBg(elem1){
	var input = elem1.parentNode.getElementsByTagName("input")[0];
	var p = elem1.getElementsByTagName("p");
	var pLength = p.length;
	for(var i = 0; i < pLength; i++){
		p[i].onmouseover = showBg;
		p[i].onmouseout = showBg;
		p[i].onclick = postText;
	}
	function showBg(){
		this.className == "hover"?this.className = " ":this.className = "hover";
	}
	function postText(){
		var selected = this.innerHTML;
		input.setAttribute("value",selected);
		elem1.style.display = "none";
	}
}
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js模拟select选择框，参照IE8样式

分类

表单按钮

描述

js模拟select下拉选择框，样式主要参照IE8与Firefox，在不改变HTML结构的前提下，可更改其它样式。建议用IE8与FF浏览，可与默认样式进行对比。最近在研究javascript的闭包与继承，写这个小东西找找感觉，不保证应用中能正常使用，仅用于...