js自定义挑选下拉框美化特效

挑选的默认样式往往很丑，为保证页面样式风格统一，需要对挑选进行美化。虽然其美化的插件很多，一搜一大把，但是需要引入长长的钢性铸铁文件和射流研究…文件实在是件头痛的事。其实挑选的实现原理很简单，就是一个点击切换显示和隐藏并传值的过程。用框架模拟了，样式想怎么写就怎么写，且不限数量。

朴素的效果：

html:

div class=' select _ box ' font‖/font span选项1/span ul li选项1/李莉选项2/李莉选项3/Li/ul/div class=' select _ box ' font‖/font span选项一/span ul li选项一/li li选项二/li li选项三/Li/ul/分区

css:

ul {边缘：0划水：0;列表式：无；}.select _ box { width:200px高度：36 pxborder:1px固体# 3CF位置：相对；float:left右边距：50 px}.select _ box span { display : inline-block；宽度宽度：200像素高度：36 px线高：36 px光标：指针指针；文本-缩进：10像素；}.选择框.span _ aa { color: # C36}。select _ box ul { width:200px位置：绝对；top :36 pxleft :-1px；border:1px固体# 3CFdisplay:none背景# fff}。select _ box Li {光标：指针；线高：36 px文本-缩进：10像素；}.select _ box Li :悬停{背景： # 39Fcolor: # fff}。select _ box font { position : absolute；right :10 px font-size :26 px；字体系列： '微软雅黑；color: # 3CF变压器：旋转(90度);} js:

$(function(){ var s_title=$(').select _ box span’)；var s_select=$(' .select _ box Li’)；s_title.click(函数(e){ $(本)).addCLaSS(' span _ aa ')；$(这个)。下一个(' ul ').show()；e . stopperpagation()；});选择。点击(函数(){ var s _ text=$(this)).html()；var s_title_2=$(this).父代(' ul ').prev(' span ')；s_title_2.html(s_text).移除CLaSS(' span _ aa ')；$(这个)。父代(' ul ').hide()；});$(文档)。单击(function(){ s _ title。移除类(' span _ aa ')；$('.select _ box ul’).hide()；});});源码下载：js选择下拉框美化下载

如果大家还想深入学习，可以点击框架下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是本文的全部内容，希望对大家学习爪哇岛描述语言程序设计有所帮助。