js实现select选择框效果及美化

网上有各种各样的关于 select 选择框的美化，找了很多，并没有好的样式效果。所以就找了一个利用 ul li 做的类似 select 选择框的效果，不废话了，先上图，效果如下：

点击一个 test ，就会把列表显示出来，再次点击，列表隐藏，选择一个 li ，就会把 span 里的内容替换成 li 的内容，然后可以用 js 监控 span 的变化，然后执行你的代码。效果如下：
html 代码如下：

<div id="type" class="test"> <span>投资种类</span> <ul class="dropdown"> <li>期货</li> <li>股票</li> <li>期权</li> </ul></div><div id="kind" class="test"> <span>投资类型</span><ul class="dropdown"> <li>趋势</li> <li>震荡</li> <li>套利</li> <li>选股</li> <li>择时</li> </ul></div>

css 代码如下：

ul li{ list-style: none;}.test { position: relative; float: left; width: 120px; height: 40px; padding-left: 11px; font-size: 15px; line-height: 40px; cursor: pointer; border: 1px solid #d2d2d2; border-radius: 3px; margin-right: 20px; outline: none;}.test:before { position: absolute; right: 13px; top: 18px; width: 0; height: 0; content: ""; border-width: 8px 8px 0 8px; border-style: solid; border-color: #d36969 transparent; -webkit-transition: transform .25s; -moz-transition: transform .25s; -ms-transition: transform .25s;-o-transition: transform .25s;transition: transform .25s;}.test:after { position: absolute; right: 15px; top: 18px; width: 0; height: 0; content: ""; border-width: 6px 6px 0 6px; border-style: solid; border-color: #fff transparent; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s;-o-transition: all .25s;transition: all .25s;}.test.active:before{ -webkit-transform: rotate（180deg）; -moz-transform: rotate（180deg）; -ms-transform: rotate（180deg）;-o-transform: rotate（180deg）;transform: rotate（180deg）; }.test.active:after{ top: 20px; -webkit-transform: rotate（180deg）; -moz-transform: rotate（180deg）; -ms-transform: rotate（180deg）;-o-transform: rotate（180deg）;transform: rotate（180deg）; }.test .dropdown { position: absolute; right: 0; left: 0; display: none; padding: 0; border-radius: inherit; border: 1px solid #d2d2d2; box-shadow: 2px 2px 5px rgba（0,0,0,.4）;}.test.active .dropdown { display: block;}.test .dropdown:before { position: absolute; right: 13px; bottom: 100%; width: 0; height: 0; content: ""; border-width: 0 8px 8px 8px; border-style: solid; border-color: #d2d2d2 transparent;}.test .dropdown:after { position: absolute; right: 15px; bottom: 100%; width: 0; height: 0; content: ""; border-width: 0 6px 6px 6px; border-style: solid; border-color: #fff transparent;}.test .dropdown li { float: left; width: 129px; font-size: 14px; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out; text-align: center;}.test .dropdown li:first-of-type { border-radius: 3px 3px 0 0;}.test .dropdown li:last-of-type { border-radius: 0 0 3px 3px;}.test .dropdown li:hover { color: #fff; background: #c43c3d;}

对于 :before 和 :after 两个伪元素不理解可以去看看我上篇博客点击这里

js 代码如下：

function DropDown（el） { this.dd = el; this.span = this.dd.children（"span"）; this.li = this.dd.find（"ul.dropdown li"）; this.val = "";}DropDown.prototype.initEvents = function（） { var obj = this; obj.dd.on（"click", function（event）{ $（this）.toggleClass（"active"）.siblings（）.removeClass（"active"）; event.stopPropagation（）; }）; obj.li.on（"click", function（） { var opt = $（this）; obj.val = opt.html（）; if （obj.span.html（） == obj.val） return;obj.span.html（obj.val）; $（document）.click（function（） {$（".test"）.removeClass（"active"）; }）; }）}var test1 = new DropDown（$（"#type"））;var test2 = new DropDown（$（"#kind"））;test1.initEvents（）;test2.initEvents（）

这里使用构造-原型组合模式来创建了一个 DropDown 对象，构造-原型组合模式解释：属性写在构造函数中，是表示每个实例独有的属性，让对象具体化；方法写在构造函数外，是为了表示每个实例共享的方法。

但是这里有点不好的方法是，已限制了 html 的布局。

精彩专题分享：javascript选择框操作汇总 jquery选择框操作汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。