平常我們用的原生select下拉框，大部分樣式沒辦法修改，導致在不同的瀏覽器里面會跟設計圖的風格大相徑庭。所以為了能讓它美化起來，就用JQ模擬了一個下拉框，可以隨意定義樣式。原生的下拉框也保留在div里面隱藏著，方便后臺開發人員對其進行操作。
效果圖如下：
HTML代碼如下：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>下拉框美化</title> <link href="css/style.css" rel="stylesheet"/> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/simSelect.js"></script> <script> $(function(){ //下面是調用初始化語句，class名可通用，也可以ID單獨定義 $(".select-box").simSelect(); //什么參數都不帶，默認樣式。建議用這個，參數都寫在div上面好了，比較直觀。 $(".slt-box01").simSelect({ //所有參數如下： maxNum: 4, //最大下拉個數(超過則顯示滾動條)，默認為5 width: 250, //下拉框盒子寬度，默認為200px。為避免過多的設置寬度，盡量依照項目中最常見的寬度設定css樣式。 direction: "down", //下拉方向，默認down，另一個是up disabled: false //是否禁用，默認不禁，禁的話是true }); $(".slt-box02").simSelect({ //舉例：這里寫參數，div上面也寫參數的情況。結果是：會以div上面的為準 maxNum: 4, width: 250, direction: "down" }); $(".slt-box03").simSelect({ //禁用下拉框的話，有三種寫法，任選。建議第二種： disabled: true, //一：這里的參數寫disabled:true 二：給div加class="disabled" 三：給原生select加disabled="true" width: 250 }); $("#slt-box04").simSelect(); //ID單獨定義。單個option可以禁用 });</script></head><body> <!-- wrap和table非必需,用于布局而已 --> <div class="wrap"> <table width="600"> <tbody> <tr> <th>不帶參數：</th> <td><div class="select-box"> <select> <option>第一個選項</option> <option>第二個選項</option> <option>第三個選項</option> <option>第四個選項</option> <option>第五個選項</option> <option>第六個選項</option> </select> </div></td> </tr> <tr> <th>初始化語句寫了參數：</th> <td><div class="slt-box01"> <select> <option>第一個選項</option> <option>第二個選項</option> <option>第三個選項</option> <option>第四個選項</option> <option>第五個選項</option> <option>第六個選項</option> </select> </div></td> </tr> <tr> <th>在div上面寫參數：</th> <td><div class="slt-box02 up" max-num="6" width="300"> <select> <option>第一個選項</option> <option>第二個選項</option> <option>第三個選項</option> <option>第四個選項</option> <option>第五個選項</option> <option>第六個選項</option> </select> </div></td> </tr> <tr> <th>禁用的樣式：</th> <td><div class="slt-box03"> <select> <option>第一個選項</option> <option>第二個選項</option> <option>第三個選項</option> <option>第四個選項</option> <option>第五個選項</option> <option>第六個選項</option> </select> </div></td> </tr> <tr> <th>其中一個選項禁用：</th> <td><div id="slt-box04" class="up" max-num="4" width="200"> <select> <option>第一個選項</option> <option>第二個選項超長超長超長超長長啊</option> <option disabled="true">第三個選項</option> <option>第四個選項</option> <option>第五個選項</option> <option>第六個選項</option> </select> </div></td> </tr> </tbody> </table> </div></body></html>CSS樣式如下：
@charset "utf-8";/* 簡單reset */body, ul, li { margin: 0; padding: 0;}body { font: 14px/24px Microsoft YaHei; color: #333;}ul { list-style: none; }a { color: #333; outline: none; text-decoration: none;}table { border-collapse: collapse; border-spacing: 0; text-align: left;}/* 布局樣式，非必須 */.wrap { width: 600px; margin: 100px auto 0; padding: 20px; background-color: #d3f3dd;}.wrap table th, .wrap table td { padding: 8px 2px; }.wrap table th { font-weight: normal; text-align: right;}/* 下拉框樣式 必須 */.select-style ul { list-style: none; padding: 0; margin: 0;}.select-style select { display: none; }.select-style { position: relative; display: inline-block; font-family: Microsoft YaHei; color: #666; font-size: 14px; text-align: left; vertical-align: middle; z-index: 50;}.select-style.focus { z-index: 51; }.select-style .slt-wrap { display: inline-block; width: 200px; border: solid 1px #d6d6d6; vertical-align: middle;}.select-style.focus .slt-wrap { border: solid 1px #53a8df; }.select-style .slt-title { position: relative; display: block; padding: 0 36px 0 5px; line-height: 30px; height: 30px; text-decoration: none; background-color: #fff; word-break: break-all; color: #666; overflow: hidden;}.select-style .slt-title .slt-text { display: inline-block; height: 30px; *cursor: pointer;}.select-style .slt-title i { position: absolute; right: 0; top: 0; display: inline-block; width: 30px; height: 30px; background: url(../images/ico-select.png) 0 0 no-repeat; *cursor: pointer;}.select-style.focus .slt-title i { background-position: 0 -30px; }.select-style.disabled .slt-title i { background-position: 0 -60px; *cursor: default; }.select-style .opn-box { display: none; position: absolute; left: 0; top: 31px; width: 100%;}.select-style.up .opn-box { top: auto; bottom: 31px;}.select-style .opn-box .opn-list { position: relative; _width: 100%; max-height: 130px; border: 1px solid #d6d6d6; background: #fff; overflow-y: auto; overflow-x: hidden;}.select-style.focus .opn-box .opn-list { border-color: #53a8df; }.select-style .opn-box .opn-list li { display: block; _width: 100%; padding-left: 5px; line-height: 26px; height: 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;}.select-style .opn-box .opn-list .selected { background: #d4edfe; }.select-style .opn-box .opn-list li:hover { color: #fff; background: #65abda;}.select-style .opn-box .opn-list li.disabled { color: #cacaca; background: #f0f0f0; cursor: default;}.select-style.disabled .slt-wrap { border: 1px solid #d6d6d6; }.select-style.disabled .slt-title { color: #cacaca; background-color: #f0f0f0; cursor: default;}.select-style.disabled .slt-title .slt-text { *cursor: default; }/* 下拉框樣式 結束 */Jquery代碼如下：
/** * Name : 美化下拉框 **/ (function(jQuery){ $.fn.simSelect = function (o) { o = $.extend({ //設置默認參數 maxNum: 5, //最大顯示5個 width: 200, //默認寬200px。為避免過多的設置寬度，盡量依照項目中最常見的寬度設定css樣式。 direction: "down", //向下拉，另一個是up disabled: false //不可用時為true },o || {}); return this.each(function(){ //構造開始 if($(this).children(".slt-wrap")){ //去重復 $(this).children(".slt-wrap").remove(); }; var $ts = $(this), $select = $ts.find("select").eq(0), wid = parseFloat($ts.attr("width")), num = parseFloat($ts.attr("max-num")), $sltWrap = $("<div class='slt-wrap'></div>").prependTo($ts), $sltTit = $("<a class='slt-title' hidefocus='true' href='javascript:void(0);'><span class='slt-text'></span><i></i></a>").prependTo($sltWrap), $sltText = $(".slt-text", $sltTit), $opnBox = $("<div class='opn-box'><ul class='opn-list'></ul></div>").appendTo($sltWrap), $opnList = $(".opn-list", $opnBox); $ts.addClass("select-style"); //增加一個class專門作為寫css樣式用 $select.find("option").each(function(i){ //循環生成li標簽 var text = $(this).text(), $li = $("<li title='"+text+"'>"+text+"</li>").appendTo($opnList); if(this.selected){ $li.addClass("selected"); $sltText.text(text).attr("title",text); }; if(this.disabled){ $li.addClass("disabled"); return; }; }); var $li = $("li",$opnList), hei = $li.height(); if(wid){ //設置寬度 $ts.css("width",wid+"px"); //兼容IE6、7 $sltWrap.css("width",wid-2+"px"); }else{ $ts.css("width",o.width+"px"); //兼容IE6、7 $sltWrap.css("width",o.width-2+"px"); }; if(num){ //設置高度 $opnList.css("max-height", hei*num+"px"); } else{ $opnList.css("max-height", hei*o.maxNum+"px"); }; if(o.direction == "up"){ //設置上、下拉方向 $ts.addClass("up"); }; $li.on("click",function(){ //li標簽的點擊事件，傳給原生select var index = $opnList.find("li").index(this), text = $(this).text(); if($(this).hasClass("disabled")){ return false; }; $(this).addClass("selected").siblings().removeClass("selected"); $select.find("option").prop("selected",false).eq(index).prop("selected",true); $sltText.text(text).attr("title",text); $opnBox.hide(); $ts.removeClass("focus"); }); $sltTit.on("click",function(e){ //a標簽的點擊下拉事件 e.stopPropagation(); //阻止a標簽的點擊冒泡 if($opnBox.is(":hidden")){ $(".select-style .opn-box").hide(); $(".select-style").removeClass("focus"); $opnBox.show(); $ts.addClass("focus"); } else{ $opnBox.hide(); $ts.removeClass("focus"); } }); $select.on("change",function(){ //原生select的點擊事件，傳給ul var index = $(this).find("option:selected").index(), text = $li.eq(index).text(); $li.eq(index).addClass("selected").siblings().removeClass("selected"); $sltText.text(text).attr("title",text); }); $(document).on("click",function(e){ //點擊其他地方收起下拉框 if($opnBox.is(":visible")){ $opnBox.hide(); $ts.removeClass("focus"); } }); if($select.prop("disabled") == true || o.disabled == true || $ts.hasClass("disabled")){ $sltTit.off("click"); //設置禁用狀態 $select.prop("disabled",true); $ts.addClass("disabled"); }; }); };})(jQuery);兼容到IE7+（IE6其實也行，只是選項多于5個下面不會出現滾動條）。
如果大家還想深入學習，可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
