select的默认样式往往很丑，为保证页面样式风格统一，需要对select进行美化。虽然其美化的插件很多，一搜一大把，但是需要引入长长的css文件和js文件实在是件头痛的事。其实select的实现原理很简单，就是一个点击 切换 显示和隐藏 并传值 的过程。用jquery模拟了，样式想怎么写就怎么写，且不限数量。
朴素的效果：
html：
select的默认样式往往很丑，为保证页面样式风格统一，需要对select进行美化。虽然其美化的插件很多，一搜一大把，但是需要引入长长的css文件和js文件实在是件头痛的事。其实select的实现原理很简单，就是一个点击 切换 显示和隐藏 并传值 的过程。用jquery模拟了，样式想怎么写就怎么写，且不限数量。
朴素的效果：
html：
css：
.select_Box{ width:200px; height:36px; border:1px solid #3CF; position:relative; float:left; margin-right:50px;}
.select_Box span{ display:inline-block; width:200px; height:36px; line-height:36px; cursor:pointer; text-indent:10px;}
.select_Box .span_aa{ color:#C36;}
.select_Box ul{ width:200px; position:absolute; top:36px; left:-1px; border:1px solid #3CF; display:none; background:#fff;}
.select_Box li{ cursor:pointer; line-height:36px; text-indent:10px;}
.select_Box li:hover{ background:#39F; color:#fff;}
.select_Box font{ position:absolute; right:10px; font-size:26px; font-family:"微软雅黑"; color:#3CF; transform:rotate(90deg);}
js：
var stitle=$(".selectBox span");
var sselect=$(".selectBox li");
s_title.click(function(e){
$(this).addClass("span_aa");
$(this).next("ul").show();
e.stopPropagation();
});
s_select.click(function(){
var s_text=$(this).html();
var s_title_2=$(this).parent('ul').prev("span");
s_title_2.html(s_text).removeClass("span_aa");
$(this).parent('ul').hide();
});
$(document).click(function(){
s_title.removeClass("span_aa");
$(".select_Box ul").hide();
});
});
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
