網上有各種各樣的關于 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選擇框操作匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
