由于select修改样式不能兼容浏览器，也不能随意修改，那么就需要模拟select，给select添加皮肤了，代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<script src="js/jquery-1.8.2.min.js"></script>
  7. 	<style>
  8. 	*{ margin:0; padding:0; }
  9. 	.mydiv{ width:350px; margin-top:100px; }
  10. 	select{ margin:10px; }
  11. 	/*js相关css*/
  12. 	.cl{ zoom:1; }
  13. 	.cl:after{ display:block; width:0; height:0; content:''; clear:both; overflow:hidden; }
  14. 	.js-select-box{ position:relative; display:inline-block; }
  15. 	.js-select-box ul,.js-select-box li{ list-style:none; }
  16. 	.js-select-box a{ text-decoration:none; }
  17. 	.js-select-tit{ cursor:pointer; width:100%; height:100%; border:1px solid #eee; height:30px; line-height:30px; }
  18. 	.js-select-tit span{ display:inline-block; text-overflow:ellipsis; white-space:nowrap; margin-left:5px; height:100%; }
  19. 	.js-select-tit .js-arr{ position:absolute; top:50%; margin-top:-3px; right:5px; display:inline-block; width:0; height:0; border:6px solid transparent; border-top:6px solid #aaa; }
  20. 	.js-select-menu{ width:100%; border:1px solid #eee; position:absolute; top:33px; background-color:#fff; display:none; max-height:150px; overflow-y:auto; }
  21. 	.js-select-menu li a{ display:block; padding:0 10px; height:25px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; }
  22. 	.js-select-menu li a:hover,.js-select-menu li.active a{ background-color:#f4f4f4; }
  23.  
  24. 	.select1{ height:40px; line-height:40px; }
  25. 	</style>
  26. </head>
  27. <body>
  28. <div class="mydiv cl">
  29. 	<select style="width:150px;">
  30. 		<option value="1">aaaa</option>
  31. 		<option value="2">bbbb</option>
  32. 		<option value="3">cccc</option>
  33. 	</select>
  34.  
  35. 	<select style="width:150px;" id="select2">
  36. 		<option value="21">aaaa2</option>
  37. 		<option value="22">bbbb2</option>
  38. 		<option value="23">cccc2</option>
  39. 		<option value="24">dddd2</option>
  40. 	</select>
  41. </div>
  42. 	<select style="width:120px;" class="select3">
  43. 		<option value="31">aaaa3</option>
  44. 		<option value="32">bbbb3</option>
  45. 	</select>
  46. 	<div class="cl">
  47. 		<select style="width:120px;" class="select1">
  48. 			<option value="11">aaaa1</option>
  49. 			<option value="12">bbbb1</option>
  50. 			<option value="13">cccc1</option>
  51. 			<option value="14">dddd1</option>
  52. 			<option value="15">eeee1</option>
  53. 			<option value="16">ffff1</option>
  54. 			<option value="17">gggg1</option>
  55. 			<option value="18">hhhh1</option>
  56. 			<option value="19">iiii1</option>
  57. 			<option value="101">jjjj1</option>
  58. 			<option value="102">kkkk1</option>
  59. 		</select>
  60. 	</div>
  61. 	<script>
  62. 	//创建节点
  63. 	function selectFun(dom,opt){
  64. 		var $dom = $(dom);
  65. 		var dtw = this.dtw = $dom.outerWidth();//宽度
  66. 		this.box = $('<div class="js-select-box"></div>');
  67. 		this.tit = $('<div class="js-select-tit" style="width:'+(dtw-2)+'px"><i class="js-arr"></i></div>');
  68. 		this.titSpan = $('<span style="width:'+(dtw-7)+'px"></span>');
  69. 		this.menu = $('<div class="js-select-menu"></div>');
  70.  
  71. 		this.box.append(this.tit.append(this.titSpan)).append(this.menu);
  72.  
  73. 		this.dom = dom;
  74. 		this.cfg = this.getConfig(opt);
  75.  
  76. 		//追加节点
  77. 		if($dom.attr("data-skin") === "true"){
  78. 			$dom.next("div.js-select-box").remove();
  79. 		}else{
  80. 			$dom.attr("data-skin","true");
  81. 		}
  82. 		$dom.after(this.box);
  83. 		$dom.hide();
  84.  
  85. 		//设置样式
  86. 		this.box.css({"margin-top":$dom.css("marginTop"),"margin-right":$dom.css("marginRight"),"margin-bottom":$dom.css("marginBottom"),"margin-left":$dom.css("marginLeft"),"width":dtw});
  87. 		this.tit.addClass($dom.prop("className"));
  88. 		$dom.prop("id") ? this.tit.prop("id",$dom.prop("id")) : "";
  89. 		this.addMenu(dom);
  90.  
  91. 		//事件
  92. 		this.bindEvent(dom);
  93. 	}
  94. 	var selectDom = null;
  95. 	selectFun.create = function(dom,opt){
  96. 		return new selectFun(dom,opt);
  97. 	}
  98. 	selectFun.prototype.getConfig = function(opt){
  99. 		var cfg = $.extend({
  100. 			val: "",//默认值
  101. 			clsName: "active",//当前class
  102. 			inx: 0,//已选择的索引
  103. 			callback: null //返回函数
  104. 		},opt || {});
  105. 		return cfg;
  106. 	}
  107. 	selectFun.prototype.setPosition = function(sibMenu){//设置下拉位置
  108. 		var wth = $(window).height();
  109. 		var ty = sibMenu.offset().top;
  110. 		var domth = sibMenu.outerHeight(true);
  111. 		var titTh = sibMenu.siblings("div.js-select-tit").outerHeight(true);
  112.  
  113. 		if((ty+domth) > wth){
  114. 			sibMenu.css({"top":"auto","bottom":(titTh+1)+"px"});
  115. 		}else{
  116. 			sibMenu.css({"top":(titTh+1)+"px","bottom":"auto"});
  117. 		}
  118. 	}
  119. 	selectFun.prototype.addMenu = function(dom){//添加下拉
  120. 		var optDoms = $(dom).find("option");
  121. 		var ulDom = $("<ul></ul>");
  122. 		var liDom = "";
  123. 		var val = this.cfg.val;//已选择的value
  124. 		for(var i=0; i<optDoms.length; i++){//创建li
  125. 			if(val === ""){
  126. 				this.titSpan.text(optDoms.eq(0).text());
  127. 				this.cfg.inx = 0;
  128. 			}else if(optDoms[i].value == val){
  129. 				this.titSpan.text(optDoms.eq(i).text());
  130. 				this.cfg.inx = i;
  131. 			}
  132. 			liDom += '<li class="js-select-items" data-val="'+optDoms[i].value+'"><a href="javascript:;">'+optDoms.eq(i).text()+'</a></li>'
  133. 		}
  134. 		ulDom.html(liDom);
  135. 		this.menu.append(ulDom).width(this.dtw-2);//添加下拉
  136.  
  137. 		ulDom.find("li").eq(this.cfg.inx).addClass(this.cfg.clsName);//添加class
  138. 	}
  139. 	selectFun.prototype.hideEvent = function(sibMenu,selectBox){//隐藏（下拉，select框）
  140. 		if(selectBox){
  141. 			selectBox = sibMenu.parent("div.js-select-box");
  142. 		}
  143. 		sibMenu.hide().css({"top":(sibMenu.siblings("div.js-select-tit").outerHeight(true)+1)+"px","bottom":"auto"});;
  144. 		selectBox.css("z-index",1);
  145. 	}
  146. 	selectFun.prototype.bindEvent = function(dom){
  147. 		var self = this;
  148. 		self.tit.click(function(){
  149. 			var $tTit = $(this);
  150. 			var $tp = $tTit.parent("div.js-select-box");
  151. 			var sib = $tTit.siblings("div.js-select-menu");
  152. 			var tpSib = $("div.js-select-box");
  153. 			if(sib.is(":hidden")){
  154. 				//隐藏已展开的select
  155. 				var sibMenu = tpSib.find("div.js-select-menu").not(":hidden");
  156.  
  157. 				self.hideEvent(sibMenu,sibMenu.parents("div.js-select-box"));//隐藏
  158.  
  159. 				sib.show();
  160. 				$tp.css("z-index",9);
  161.  
  162. 				self.setPosition(sib);//位置
  163. 				selectDom = self;
  164. 			}else{
  165. 				self.hideEvent(sib,$tp);//隐藏
  166. 				selectDom = null;
  167. 			}
  168. 		});
  169. 		self.menu.on("click","li",function(){
  170. 			self.setVal($(this),self.dom);
  171. 		});
  172. 		$(document).click(function(e){
  173. 			var tag = $(e.target || window.event.srcElement);
  174. 			var boxDom = $("div.js-select-box").not(":hidden");
  175. 			if(tag.hasClass("js-select-box") || tag.parents("div.js-select-box").length > 0){
  176. 				return;
  177. 			}else{
  178. 				self.hideEvent(boxDom.find("div.js-select-menu"),boxDom);//隐藏
  179. 			}
  180. 		});
  181. 	}
  182. 	selectFun.keyDownFun = function(e){
  183. 		var self = selectDom;
  184. 		var sib = $("div.js-select-menu").not(":hidden");
  185. 		var sibTp = sib.parents("div.js-select-box");
  186. 		var dom = sibTp.prev("select")[0];
  187. 		var lis = sib.find("li.active");
  188. 		var code = e.keyCode;
  189. 		var nextOrPrev,clsName;
  190. 		if(!self){
  191. 			return;
  192. 		}
  193. 		clsName = self.cfg.clsName;
  194. 		switch(code){
  195. 		  case 40:
  196. 			nextOrPrev = self.nextOrPrevDom(lis,true);//添加class
  197. 			nextOrPrev.addClass(clsName).siblings("li").removeClass(clsName);
  198. 			self._scrollToItem(nextOrPrev);
  199. 			break;
  200. 		  case 38:
  201. 		    nextOrPrev = self.nextOrPrevDom(lis,false);//添加class
  202. 			nextOrPrev.addClass(clsName).siblings("li").removeClass(clsName);
  203. 			self._scrollToItem(nextOrPrev);
  204. 			break;
  205. 		  case 13:
  206. 		  	self.setVal(lis,dom);
  207. 		    break;
  208. 		  case 27:
  209. 		  	self.hideEvent(sib,sibTp);//隐藏
  210. 		    break;
  211. 		  default:break;
  212. 		}
  213. 	}
  214. 	selectFun.prototype.nextOrPrevDom = function(curDom,isNext){
  215. 		var obj = null;
  216. 		if(isNext){
  217. 			obj = curDom.next();
  218. 			if(obj.length <= 0){
  219. 				obj = curDom.parents("div.js-select-menu").find("li").eq(0);
  220. 			}
  221. 		}else{
  222. 			obj = curDom.prev();
  223. 			if(obj.length <= 0){
  224. 				obj = curDom.parents("div.js-select-menu").find("li:last");
  225. 			}
  226. 		}
  227. 		return obj;
  228. 	}
  229. 	selectFun.prototype._scrollToItem = function(item){
  230. 		var menuDom = item.parents(".js-select-menu");
  231. 		menuDom.scrollTop((menuDom.find("li").height()*item.index())/2);
  232. 	};
  233. 	selectFun.prototype.setVal = function(t,dom){//设置内容
  234. 		var inx = t.index();
  235. 		var txt = t.text();
  236. 		var dataVal = t.data("val");
  237. 		var tp = t.parents("div.js-select-menu");
  238. 		var fn = new Function();
  239. 		tp.siblings("div.js-select-tit").find("span").text(txt);
  240. 		this.hideEvent(tp,tp.parent("div.js-select-box"));//隐藏
  241. 		t.addClass(this.cfg.clsName).siblings("li").removeClass(this.cfg.clsName);//添加class
  242. 		$(dom).find("option").eq(inx).prop("selected",true);//select赋值
  243. 		if((typeof this.cfg.callback).toLowerCase() === "function"){
  244. 			this.cfg.callback(dataVal,txt,inx);//已选择的：val，text，索引
  245. 		}
  246. 		$(dom).trigger("change");
  247. 	}
  248.  
  249. 	$.fn.extend({
  250. 		selecter : function(options){
  251. 			this.each(function(i,dom){
  252. 				selectFun.create(dom,options);
  253. 			});
  254. 		}
  255. 	});
  256. 	$(document).on("keydown",selectFun.keyDownFun);
  257. 	$("select").selecter();
  258. 	$(".select1").selecter({"callback":function(v,txt,i){
  259. 		console.log(v,txt,i);
  260. 	}});
  261. 	$("select").change(function(){
  262. 		alert($(this).val());
  263. 	});
  264. 	</script>
  265. </body>
  266. </html>

　　但在这在ie7上有点儿小样式问题，不过可以通过修改样式解决，从而到达自己想要的效果。

select的onchange事件的函数，可以通过callback来完成。

select添加皮肤 jquery的更多相关文章

  1. jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)

    jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val();  //选择被选中Radio的Val ...

  2. JavaScript为select添加option，select选项变化时的处理，获取slelect被选中的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. C# 、winform 添加皮肤后(IrisSkin2) label设置的颜色 无法显示

    C# .winform 添加皮肤后(IrisSkin2) label设置的颜色 无法显示 解决方法一:设置label的Tag属性值与skinEngine的DisableTag属性值相同即可.默认值是9 ...

  4. 在Unicode版Inno Setup中使用ISSkin给安装程序添加皮肤

    原文 http://www.cnblogs.com/2356/archive/2009/10/27/1590565.html 在Unicode版Inno Setup中使用ISSkin给安装程序添加皮肤 ...

  5. select添加option

    本文介绍select添加option的两种方法 1.使用selectObject.add(option,before)方法,其中 option为要添加选项元素.必需是 option 或 optgrou ...

  6. 纯js遍历json获取值动态为select添加option

    遍历json数组 并动态为select添加option 直接上代码,重要部分有注解 <!DOCTYPE html> <html lang="en"> < ...

  7. add() 方法用于向 <select> 添加一个 <option> 元素。

    //add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...

  8. C# 给窗体添加皮肤 - SkinEngine的应用

    C# 给窗体添加皮肤 - SkinEngine的应用   C#中利用 IrisSkin2.dll 所提供的控件 SkinEngine 来为窗体添加皮肤.这种方法最简单 具体步骤: .添加控件SkinE ...

  9. add(expr|ele|html|obj[,con]) 把与表达式匹配的元素添加到jQuery对象中。

    add(expr|ele|html|obj[,con]) 概述 把与表达式匹配的元素添加到jQuery对象中.这个函数可以用于连接分别与两个表达式匹配的元素结果集. jQuery 1.4 中, .ad ...

随机推荐

  1. 关于组播数据包“发不出去"，c#无法接收

    问题一:发不出去 最近做一个小东西改进方案需要用到组播,简单来说就是我先作为服务器端组播发送设备编号,然后组播成员作为客户端接收消息后先确认对方是不是在呼叫我.是的话就返回一个消息,这样我服务器端就可 ...

  2. XML 基本概念和XPath选择

    books.xml文件 <?xml version="1.0" encoding="ISO-8859-1"?> <bookstore> ...

  3. 云数据库 MongoDB版

    阿里云云数据库MongoDB版是一种安全可靠.可弹性伸缩的云数据库服务,目前支持ReplicaSet和Sharding两种部署架构,通过简单的几步操作即可快速部署.阿里云云数据库MongoDB版是一种 ...

  4. 第二大矩阵面积--（stack）牛客多校第二场-- Second Large Rectangle

    题意: 给你一幅图,问你第二大矩形面积是多少. 思路: 直接一行行跑stack求最大矩阵面积的经典算法,不断更新第二大矩形面积,注意第二大矩形可能在第一大矩形里面. #define IOS ios_b ...

  5. tp5.1中redis使用

    一.环境安装 1.下载redis,igbniary https://windows.php.net/downloads/pecl/releases/igbinary/ https://windows. ...

  6. 一步一步带你入门MySQL中的索引和锁 （转）

    出处: 一步一步带你入门MySQL中的索引和锁 索引 索引常见的几种类型 索引常见的类型有哈希索引,有序数组索引,二叉树索引,跳表等等.本文主要探讨 MySQL 的默认存储引擎 InnoDB 的索引结 ...

  7. Collection接口的子接口——Set接口

    https://docs.oracle.com/javase/8/docs/api/java/util/Set.html public interface Set<E>  extends ...

  8. JSP和JSTL视图解析器

    使用JSTL users.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&qu ...

  9. bzoj 4237 稻 草 人

    bzoj 这个矩形有三个限制,分别是右上角点的横纵坐标分别大于左下角废话,并且中间区域没有点.那么可以先按横坐标排序,然后枚举左边的点和右边的点匹配.为了保证复杂度,这里每次把点集一分为二,先递归处理 ...

  10. Vue之动态class写法总结

    对象方法 最简单的绑定 :class="{ 'active': isActive }" 判断是否绑定一个active :class="{'active':isActive ...