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

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script src="js/jquery-1.8.2.min.js"></script>

	<style>

	*{ margin:0; padding:0; }

	.mydiv{ width:350px; margin-top:100px; }

	select{ margin:10px; }

	/*js相关css*/

	.cl{ zoom:1; }

	.cl:after{ display:block; width:0; height:0; content:''; clear:both; overflow:hidden; }

	.js-select-box{ position:relative; display:inline-block; }

	.js-select-box ul,.js-select-box li{ list-style:none; }

	.js-select-box a{ text-decoration:none; }

	.js-select-tit{ cursor:pointer; width:100%; height:100%; border:1px solid #eee; height:30px; line-height:30px; }

	.js-select-tit span{ display:inline-block; text-overflow:ellipsis; white-space:nowrap; margin-left:5px; height:100%; }

	.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; }

	.js-select-menu{ width:100%; border:1px solid #eee; position:absolute; top:33px; background-color:#fff; display:none; max-height:150px; overflow-y:auto; }

	.js-select-menu li a{ display:block; padding:0 10px; height:25px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; }

	.js-select-menu li a:hover,.js-select-menu li.active a{ background-color:#f4f4f4; }

	.select1{ height:40px; line-height:40px; }

	</style>

</head>

<body>

<div class="mydiv cl">

	<select style="width:150px;">

		<option value="1">aaaa</option>

		<option value="2">bbbb</option>

		<option value="3">cccc</option>

	</select>

	<select style="width:150px;" id="select2">

		<option value="21">aaaa2</option>

		<option value="22">bbbb2</option>

		<option value="23">cccc2</option>

		<option value="24">dddd2</option>

	</select>

</div>

	<select style="width:120px;" class="select3">

		<option value="31">aaaa3</option>

		<option value="32">bbbb3</option>

	</select>

	<div class="cl">

		<select style="width:120px;" class="select1">

			<option value="11">aaaa1</option>

			<option value="12">bbbb1</option>

			<option value="13">cccc1</option>

			<option value="14">dddd1</option>

			<option value="15">eeee1</option>

			<option value="16">ffff1</option>

			<option value="17">gggg1</option>

			<option value="18">hhhh1</option>

			<option value="19">iiii1</option>

			<option value="101">jjjj1</option>

			<option value="102">kkkk1</option>

		</select>

	</div>

	<script>

	//创建节点

	function selectFun(dom,opt){

		var $dom = $(dom);

		var dtw = this.dtw = $dom.outerWidth();//宽度

		this.box = $('<div class="js-select-box"></div>');

		this.tit = $('<div class="js-select-tit" style="width:'+(dtw-2)+'px"><i class="js-arr"></i></div>');

		this.titSpan = $('<span style="width:'+(dtw-7)+'px"></span>');

		this.menu = $('<div class="js-select-menu"></div>');

		this.box.append(this.tit.append(this.titSpan)).append(this.menu);

		this.dom = dom;

		this.cfg = this.getConfig(opt);

		//追加节点

		if($dom.attr("data-skin") === "true"){

			$dom.next("div.js-select-box").remove();

		}else{

			$dom.attr("data-skin","true");

		}

		$dom.after(this.box);

		$dom.hide();

		//设置样式

		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});

		this.tit.addClass($dom.prop("className"));

		$dom.prop("id") ? this.tit.prop("id",$dom.prop("id")) : "";

		this.addMenu(dom);

		//事件

		this.bindEvent(dom);

	}

	var selectDom = null;

	selectFun.create = function(dom,opt){

		return new selectFun(dom,opt);

	}

	selectFun.prototype.getConfig = function(opt){

		var cfg = $.extend({

			val: "",//默认值

			clsName: "active",//当前class

			inx: 0,//已选择的索引

			callback: null //返回函数

		},opt || {});

		return cfg;

	}

	selectFun.prototype.setPosition = function(sibMenu){//设置下拉位置

		var wth = $(window).height();

		var ty = sibMenu.offset().top;

		var domth = sibMenu.outerHeight(true);

		var titTh = sibMenu.siblings("div.js-select-tit").outerHeight(true);

		if((ty+domth) > wth){

			sibMenu.css({"top":"auto","bottom":(titTh+1)+"px"});

		}else{

			sibMenu.css({"top":(titTh+1)+"px","bottom":"auto"});

		}

	}

	selectFun.prototype.addMenu = function(dom){//添加下拉

		var optDoms = $(dom).find("option");

		var ulDom = $("<ul></ul>");

		var liDom = "";

		var val = this.cfg.val;//已选择的value

		for(var i=0; i<optDoms.length; i++){//创建li

			if(val === ""){

				this.titSpan.text(optDoms.eq(0).text());

				this.cfg.inx = 0;

			}else if(optDoms[i].value == val){

				this.titSpan.text(optDoms.eq(i).text());

				this.cfg.inx = i;

			}

			liDom += '<li class="js-select-items" data-val="'+optDoms[i].value+'"><a href="javascript:;">'+optDoms.eq(i).text()+'</a></li>'

		}

		ulDom.html(liDom);

		this.menu.append(ulDom).width(this.dtw-2);//添加下拉

		ulDom.find("li").eq(this.cfg.inx).addClass(this.cfg.clsName);//添加class

	}

	selectFun.prototype.hideEvent = function(sibMenu,selectBox){//隐藏（下拉，select框）

		if(selectBox){

			selectBox = sibMenu.parent("div.js-select-box");

		}

		sibMenu.hide().css({"top":(sibMenu.siblings("div.js-select-tit").outerHeight(true)+1)+"px","bottom":"auto"});;

		selectBox.css("z-index",1);

	}

	selectFun.prototype.bindEvent = function(dom){

		var self = this;

		self.tit.click(function(){

			var $tTit = $(this);

			var $tp = $tTit.parent("div.js-select-box");

			var sib = $tTit.siblings("div.js-select-menu");

			var tpSib = $("div.js-select-box");

			if(sib.is(":hidden")){

				//隐藏已展开的select

				var sibMenu = tpSib.find("div.js-select-menu").not(":hidden");

				self.hideEvent(sibMenu,sibMenu.parents("div.js-select-box"));//隐藏

				sib.show();

				$tp.css("z-index",9);

				self.setPosition(sib);//位置

				selectDom = self;

			}else{

				self.hideEvent(sib,$tp);//隐藏

				selectDom = null;

			}

		});

		self.menu.on("click","li",function(){

			self.setVal($(this),self.dom);

		});

		$(document).click(function(e){

			var tag = $(e.target || window.event.srcElement);

			var boxDom = $("div.js-select-box").not(":hidden");

			if(tag.hasClass("js-select-box") || tag.parents("div.js-select-box").length > 0){

				return;

			}else{

				self.hideEvent(boxDom.find("div.js-select-menu"),boxDom);//隐藏

			}

		});

	}

	selectFun.keyDownFun = function(e){

		var self = selectDom;

		var sib = $("div.js-select-menu").not(":hidden");

		var sibTp = sib.parents("div.js-select-box");

		var dom = sibTp.prev("select")[0];

		var lis = sib.find("li.active");

		var code = e.keyCode;

		var nextOrPrev,clsName;

		if(!self){

			return;

		}

		clsName = self.cfg.clsName;

		switch(code){

		  case 40:

			nextOrPrev = self.nextOrPrevDom(lis,true);//添加class

			nextOrPrev.addClass(clsName).siblings("li").removeClass(clsName);

			self._scrollToItem(nextOrPrev);

			break;

		  case 38:

		    nextOrPrev = self.nextOrPrevDom(lis,false);//添加class

			nextOrPrev.addClass(clsName).siblings("li").removeClass(clsName);

			self._scrollToItem(nextOrPrev);

			break;

		  case 13:

		  	self.setVal(lis,dom);

		    break;

		  case 27:

		  	self.hideEvent(sib,sibTp);//隐藏

		    break;

		  default:break;

		}

	}

	selectFun.prototype.nextOrPrevDom = function(curDom,isNext){

		var obj = null;

		if(isNext){

			obj = curDom.next();

			if(obj.length <= 0){

				obj = curDom.parents("div.js-select-menu").find("li").eq(0);

			}

		}else{

			obj = curDom.prev();

			if(obj.length <= 0){

				obj = curDom.parents("div.js-select-menu").find("li:last");

			}

		}

		return obj;

	}

	selectFun.prototype._scrollToItem = function(item){

		var menuDom = item.parents(".js-select-menu");

		menuDom.scrollTop((menuDom.find("li").height()*item.index())/2);

	};

	selectFun.prototype.setVal = function(t,dom){//设置内容

		var inx = t.index();

		var txt = t.text();

		var dataVal = t.data("val");

		var tp = t.parents("div.js-select-menu");

		var fn = new Function();

		tp.siblings("div.js-select-tit").find("span").text(txt);

		this.hideEvent(tp,tp.parent("div.js-select-box"));//隐藏

		t.addClass(this.cfg.clsName).siblings("li").removeClass(this.cfg.clsName);//添加class

		$(dom).find("option").eq(inx).prop("selected",true);//select赋值

		if((typeof this.cfg.callback).toLowerCase() === "function"){

			this.cfg.callback(dataVal,txt,inx);//已选择的：val，text，索引

		}

		$(dom).trigger("change");

	}

	$.fn.extend({

		selecter : function(options){

			this.each(function(i,dom){

				selectFun.create(dom,options);

			});

		}

	});

	$(document).on("keydown",selectFun.keyDownFun);

	$("select").selecter();

	$(".select1").selecter({"callback":function(v,txt,i){

		console.log(v,txt,i);

	}});

	$("select").change(function(){

		alert($(this).val());

	});

	</script>

</body>

</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. linux中为什么删除文件比创建文件要快，读取文件和删除文件的过程是什么？

    一.为什么删除文件比创建文件要快? 因为删除文件只是将bitmap位图表中将文件所占据的inode 和dacablock的使用状态从1变成0,相当于释放了这些快的使用权. 二.读取文件和删除文件的过程 ...

  2. git（程序员的时光机）

    git 是什么 最强大的分布式版本控制系统,没有之一 版本控制: 完成一项任务,最终的成果可能是经过中间修修修改n次得到的,在这n个版本之间的切换就叫版本控制. 集中式的版本控制svn,cvs缺点: ...

  3. 【C/C++】对于可重入、线程安全、异步信号安全几个概念的理解

    由于前段时间,程序偶尔异常挂起不工作,检查后发现时死锁了,原因就是:在信号处理函数里面调用了fprintf. printf等io函数是需要对输出缓冲区加锁,这类函数对本身是线程安全的,但是对信号处理函 ...

  4. 【VS开发】C++线程安全

    我们是多么渴望各种C++类都是多线程安全的,然而一旦涉及到对象间的交互,这样的渴望可能就只能是奢望了.下面,我们以设计一个双向链结点为例,看看要使其多线程安全将会带来一些什么问题. class Dou ...

  5. Tableau常用图表

    条形图: 饼图: 调整大小: 折线图: 面积图: 组合图: 文本表: 突出显示表: 直方图: 气泡图: 散点图:

  6. Ubuntu - Ubuntu应用记录（1）

    1.发生dpkg status database is locked by another process 原因是包管理器没有正确关闭.需要重启计算机或者重新打开终端 输入: sudo rm /var ...

  7. python多线程学习（一）

    python多线程.多进程 初探 原先刚学Java的时候,多线程也学了几天,后来一直没用到.然后接触python的多线程的时候,貌似看到一句"python多线程很鸡肋",于是乎直接 ...

  8. Abp添加新的Api(不扩展底层方法)

    定义新的实体类:FileManage;继承 FullAuditedEntity<Guid> 在XX.Application 中定义IXXservice及实现XXservice public ...

  9. 学会这 2 点，轻松看懂 MySQL 慢查询日志

    MySQL中的日志包括:错误日志.二进制日志.通用查询日志.慢查询日志等等.这里主要介绍下比较常用的两个功能:通用查询日志和慢查询日志. 1)通用查询日志:记录建立的客户端连接和执行的语句. 2)慢查 ...

  10. ccs之经典布局（三）（等分，等高布局）

    接上篇ccs之经典布局(二)(两栏,三栏布局) 七.等分布局 等分布局是指一行被分为若干列,每一列的宽度是相同的值.两列之间有若干的距离. 1.float+padding+background-cli ...