教程集 > 脚本编程 > javascript > 正文 js 控制完美select下拉选框代码

js 控制完美select下拉选框代码

发布时间：2023-06-07 编辑：jiaochengji.com

教程集为您提供js 控制完美select下拉选框代码等资源，欢迎您收藏本站，我们将为您提供最新的js 控制完美select下拉选框代码资源

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta http-equiv="Content-Language" content="zh-CN" />  <title>用javascript美化Select</title>  <style type="text/css">  * { margin:0; padding:0; }  body { margin:50px; }  .iDiv {  	position:absolute;  	height:19px;  	font-size:12px;  	color:#333;  	line-height:19px;  	text-indent:4px;  	vertical-align:middle;  	border:1px solid #7f9db9;  	cursor:default;  	cursor:pointer;  	background:url(http://pet.runsky.com/img/select_bg.gif) no-repeat 100% 0;  }  .iDiv_over { color:#f96; background-position:100% -25px; }  .iDiv_out { color:#333; background-position:100% 0; }  .cDiv {  	position:absolute;  	moz-user-select:none;  	border:1px solid #7f9db9;  	cursor:default;  	background:#fff;  	overflow:auto;  	z-index:1;  }  .cDiv ul {  	font-size:12px;  	color:#878787;  	listStyle:none;  	margin:0;  	padding:0;  }  .cDiv ul li {  	height:24px;  	line-height:24px;  	text-indent:4px;  }  </style>  <script type="text/javascript">  // JavaScript Document  function $() {  	return document.getElementById(arguments[0]);  }  //取得外部class的属性值  function getCurrentStyle(o) {  	return o.currentStyle||document.defaultView.getComputedStyle(o,null);  }  var SetAllSelects = {  	Offset:function(e) {  		var t = e.offsetTop;  		var l = e.offsetLeft;  		var w = e.offsetWidth;  		var h = e.offsetHeight;  		while(e = e.offsetParent) { t  = e.offsetTop; l  = e.offsetLeft; }  		return {top:t, left:l, width:w,	height:h};  	},  	setCreated:function(obj,status) { //设置属性  		obj.setAttribute("childCreated",status);  	},  	getCreated:function(obj) { //获取属性  		var status = obj.getAttribute("childCreated");  		if(status == null) { status = ""; }  		return status;  	},  	setSelectStyle:function(obj,idnum,showHeight) {  		if(obj.id == null || obj.id == "") { obj.id = "selectID_" idnum; }  		var offset = this.Offset(obj);  		obj.style.visibility = "hidden";  		var mainDiv = document.createElement("div");  		var iDiv = document.createElement("div");  		var js_select_;  		var _this = this;  		iDiv.className = "iDiv";  		iDiv.id = js_select_ obj.id;  		iDiv.style.width = offset.width   "px";  		iDiv.style.top = offset.top   "px";  		iDiv.style.left = offset.left   "px";  		this.setCreated(iDiv,"");  		mainDiv.appendChild(iDiv);  		var tValue = obj.options[obj.selectedIndex].innerHTML;  		iDiv.innerHTML = tValue;  		iDiv.onmouseover = function() { iDiv.className = "iDiv iDiv_over"; }  		iDiv.onmouseout = function() { iDiv.className = "iDiv iDiv_out"; }  		iDiv.onclick = function() {  			var created = _this.getCreated(this);  			if (created != "") {  				if (created == "open") {  					this.nextSibling.style.display = "none";  					_this.setCreated(this,"close");  				}  				else {  					_this.setCreated(this,"open");  					var arrLiObj = this.nextSibling.getElementsByTagName("li");  					var selOjbIndex = 0;  					for(var i=0;i<arrLiObj.length;i  ) {  						var status = arrLiObj[i].getAttribute("liSelected");  						if(status == null) { status = ""; }  						if(status == "selected") { selOjbIndex = i; break; }  					}  					arrLiObj[selOjbIndex].style.background = "#fff";  					arrLiObj[selOjbIndex].style.color = "#878787";  					this.nextSibling.style.display = "block";  				}  			}  			else {  				_this.setCreated(this,"open");  				var cDiv = document.createElement("div");  				cDiv.className = "cDiv";  				cDiv.style.width = offset.width   "px";  				cDiv.style.height = obj.options.length * 19   "px";  				if(parseInt(cDiv.style.height)>showHeight) {  					cDiv.style.height = showHeight   "px";  				}  				cDiv.style.top = (offset.top parseInt(getCurrentStyle(this).height) 1)   "px";  				cDiv.style.left = offset.left   "px";  				cDiv.onselectstart = function() {return false;};  				var uUl = document.createElement("ul");  				cDiv.appendChild(uUl);  				mainDiv.appendChild(cDiv);  				for (var i=0;i<obj.options.length;i  ) {  					var lLi = document.createElement("li");  					lLi.id = obj.options[i].value;  					lLi.innerHTML = obj.options[i].innerHTML;  					lLi.sValue = obj.options[i].value;  					uUl.appendChild(lLi);  				}  				var liObj = uUl.getElementsByTagName("li");  				if(liObj.length>0) {  					for (var j=0;j<obj.options.length;j  ) {  						liObj[j].onmouseover = function() {  							var arrLiObj = this.parentNode.getElementsByTagName("li");  							for(var i=0;i<arrLiObj.length;i  ) {  								var status = "";  								var _background = "#ccc";  								var _color = "#000";  								if(arrLiObj[i] != this) {  									_background = "#fff";  									_color = "#878787";  									status = "selected";  								}  								arrLiObj[i].style.background = _background;  								arrLiObj[i].style.color = _color;  								arrLiObj[i].setAttribute("liSelected",status);  							}  						}  						liObj[j].onclick = function() {  							obj.options.length = 0;  							obj.options[0] = new Option(this.innerHTML,this.sValue);  							this.parentNode.parentNode.style.display = "none";  							_this.setCreated(this.parentNode.parentNode.previousSibling,"close");  							iDiv.innerHTML = this.innerHTML;  						};  						liObj[0].style.background = "#ccc";  						liObj[0].style.color = "#000";  						liObj[0].setAttribute("liSelected","selected");  					}  				}  			}  		}  		document.body.appendChild(mainDiv);  	},  	setAllSelectStyle:function() {  		var s = document.getElementsByTagName("select");  		for (var i=0; i<s.length; i  ) {  			if(s[i].className == "select") {  				this.setSelectStyle(s[i],i,200);  			}  		}  	}  }  document.onclick = function(e) {  	e = e || window.event;  	var target = e.target || event.srcElement;  	var s = document.getElementsByTagName("select");  	var js_select_;  	for (var i=0; i<s.length; i  ) {  		if(s[i].className == "select") {  			var objdivtmp = $(js_select_ s[i].id);  			var created = SetAllSelects.getCreated(objdivtmp);  			if (created == "open") {  				if(target != objdivtmp) {  					objdivtmp.nextSibling.style.display = "none";  					SetAllSelects.setCreated(objdivtmp,"close");  				}  			}  		}  	}  }  window.onload = function() {  	SetAllSelects.setAllSelectStyle();  }  function getValue() {  	var kk = document.getElementsByTagName('select')[0];  	return kk.options[kk.selectedIndex].value;  }  function getTxt() {  	var kk = document.getElementsByTagName('select')[0];  	return kk.options[kk.selectedIndex].innerHTML;  }  </script>  </head>  <body style=" text-align:center">  <div style=" width:900px;  height:20px; background:#f00;">  	<div style=" width:100px; float:right; background:#fff;">  	<select class="select">          <option value="3_1">选择</option>          <option value="3_2">选择3_22_22_22_2</option>          <option value="3_3">选择3_22_22_22_3</option>          <option value="3_4">选择3_22_22_22_4</option>          <option value="3_5">选择3_22_22_22_5</option>          <option value="3_6">选择3_22_22_22_6</option>          <option value="3_7">选择3_22_22_22_7</option>          <option value="3_8">选择3_22_22_22_8</option>          <option value="3_9">选择3_22_22_22_9</option>          <option value="3_10">选择3_22_22_22_10</option>          <option value="3_11">选择3_22_22_22_11</option>          <option value="3_12">选择3_22_22_22_12</option>          <option value="3_13">选择3_22_22_22_13</option>          <option value="3_14">选择3_22_22_22_14</option>          <option value="3_15">选择3_22_22_22_15</option>          <option value="3_16">选择3_22_22_22_16</option>    	</select>  	</div>  </div>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
JQuery 常用操作代码
 用jQuery实现的模拟下拉框代码
 Jquery 获取表单text,areatext,radio,checkbox,select值的代码
 jquery 操作input标签方法大全
 jQuery select操作控制方法小结
 基于jquery的网页SELECT下拉框美化代码
 jQuery获取Select选择的Text和Value(详细汇总)
jQuery获取Select中Text与Value值
 Jquery获取Select下拉框中Text与Value的方法详解
 jQuery操作下拉框与文本框

上一篇：js可控下拉弹出层代码下一篇：可控图片左右滚动代码

[关闭]

js 控制完美select下拉选框代码

最近更新

浏览排行