css + jquery 自定義下拉框

有沒有厭倦了瀏覽器自帶的selected選擇框，下面分享一個自寫的用jquey + css建立的下拉框方法：

一、樣式定義：能夠傳入不一樣樣式，定義本身的下拉框樣式：

.mycomboxDiv{font-size:12px;border: 1px #000 solid;background:#FFFFFF ;text-align:center;overflow:hidden}
.mycomboxOptionDiv{background-color:white;font-size:12px;display:none;border: 1px #000 solid;text-align:center}
.mycomboxOptionDiv ul{list-style-type:none;margin:0px;padding:0px;}
.mycomboxOptionDiv ul li{cursor:pointer;margin:0px;line-height:15px;width:100%;height:15px;overflow:hidden}
.mycomboxOptionDiv ul li:hover{background-color :#66ccff;}
.mycomboxOptionDiv ul li.active{background-color :#66ccff;}

2.jmycombox.js代碼：

(function($){
$.fn.mycombox = function(options){
 //默認值
 var defaults = {    
 mycomboxOptionDiv: 'mycomboxOptionDiv',
 mycomboxDiv:'mycomboxDiv',
 downIcon:'icon-down.gif',
 optionDivHeight:null
 };
 //options格式爲{"name":"value"}，從外部傳入
 var opts = $.extend(defaults, options); 
 //獲取selected的jquery對象
 var $selectedDom = $(this);  
 //獲取selected的id
 var selectionId = $selectedDom.attr("id");
 //獲取selected裏面的option數組
 var $selectedOptions = $selectedDom.children("option");
 //獲取selected裏面的寬度
          var width = $selectedDom.width();
 //獲取selected裏面的高度
 var height = $selectedDom.height();
 //獲取selected裏面的title
          var title = $selectedDom.attr("title");
 if(title == undefined){
    title="請選擇"
 }
 //option內容div的高度定義
 var optContentDivHeight = opts.optionDivHeight == null?"":"height:"+opts.optionDivHeight+"px";
 
 var onchageFunction = $(this).attr("onchange");
 


 var alreadySelectedVal = null;
 var alreadySelectedText = null;
 //定義須要進行替換selected的用於顯示的div的id
 var comboxDivId = selectionId + "DivId";
 //定義須要顯示子類的option
          var comboxOptionDivId = comboxDivId + "OptionId";
          var comboxDivSpanId = comboxDivId + "Span";
 var comboxDivSpanImage = comboxDivId + "Image";
 //定義用於顯示的div的html內容
 var displayDivHtml = "<div  class="+opts.mycomboxDiv+" id="+comboxDivId+" style='position:relative;width:"+width+"px;height:"+height+"px;line-height:"+height+"px;'><span id="+comboxDivSpanId+">"+title+"</span><img id="+comboxDivSpanImage+" src='"+opts.downIcon+"' style='position:absolute;cursor:pointer;right:0px;top:0px;'/></div>";
 $(displayDivHtml).insertAfter($selectedDom);
     //隱藏selected標籤
          $selectedDom.css("display","none");

 //定義須要進行替換selected的用於顯示的div的jquery對象
 var $comboxDiv = $("#" + comboxDivId);

  //定義須要進行替換selected的並用於顯示的div的位置信息
 var position = $comboxDiv.offset(); 
 
 //組織option數據html元素
 var optionHtml = loadOption();
          var optionDivhtml = "<div class="+opts.mycomboxOptionDiv+" id=" + comboxOptionDivId + " style='"+optContentDivHeight+";overflow-y:auto;z-index:3;position:absolute;top:"+(position.top + 3 + height)+"px;left:"+position.left+"px;width:"+width+"px'>"+optionHtml+"</div>";
 $(optionDivhtml).insertAfter($comboxDiv);


 var $comboxOptionDiv = $("#" + comboxOptionDivId);

 //點擊顯示框div,展開或關閉選項窗口
     $("#" + comboxDivSpanImage).click(function(){
closeOptionDiv();
    });
 
//關閉option區域
function closeOptionDiv(){
var display = $comboxOptionDiv.css("display");
if(display == "none"){
$comboxOptionDiv.css("display","block")
}else if(display == "block"){
$comboxOptionDiv.css("display","none")
}
}


 //單擊選項窗口選擇選項後賦值操
  var lastSelectedOptonObj = null;
  $("#"+comboxOptionDivId+" ul li").click(function(){
optionOnclick(this);
//模擬selected的onchange時間
if(onchageFunction != null){
if(lastSelectedOptonObj != this){
onchageFunction.call();
}

   }
lastSelectedOptonObj = this;
  });

  function optionOnclick(obj){
   var content = $(obj).children("span").text();
$(obj).parent().children("li").removeClass("active");
$(obj).addClass("active");


$comboxOptionDiv.css("display","none");
$("#" + comboxDivSpanId).text(content);
$comboxDiv.attr("title",content);
$selectedDom.val($(obj).children("span").attr("value"));
  }

  //重置selected
  this.resetSelected = function(){
   $("#"+comboxOptionDivId+" ul").children("li").removeClass("active");
   if(alreadySelectedVal != null && alreadySelectedText != null){
$("#" + comboxDivSpanId).text(alreadySelectedText);
$comboxDiv.attr("title",alreadySelectedText);
   $selectedDom.val(alreadySelectedVal);
}else{
$("#" + comboxDivSpanId).text(title);
$comboxDiv.removeAttr("title");
$selectedDom.val("");
}

  }


//單擊頁面其餘位置時關閉該option窗口
$("html").click(function(e){
if(comboxOptionDivId != e.target.id && comboxDivId != e.target.id 
 && comboxDivSpanImage != e.target.id
 && comboxDivSpanId != e.target.id ){
   $comboxOptionDiv.css("display","none");
}
});
  
//從新加載option數據
       this.reloadOption = function(){
alreadySelectedVal = null;
alreadySelectedText = null;
$selectedDom = $("#" + selectionId);  
   $selectedOptions = $selectedDom.children("option");
$("#" + comboxDivSpanId).text(title);
$comboxOptionDiv.empty();
$comboxOptionDiv.html(loadOption());
alert(loadOption());
$("#"+comboxOptionDivId+" ul li").click(function(){
optionOnclick(this);
    });
alert("從新加載option數據成功");
};
           
   

//加載option數據
            function loadOption(){
var optHtml = "<ul>";
$selectedOptions.each(function(){
var optionVal = $(this).val();
var flag = $(this).attr("selected");
var text = $(this).text();
if(optionVal != ""){
  var selectedClass = "";
  if(flag){  
 selectedClass = "class = active";
 $("#" + comboxDivSpanId).text(text);
 $comboxDiv.attr("title",text);
 $selectedDom.val(optionVal);
 alreadySelectedVal = optionVal;
 alreadySelectedText = text;
  }
 optHtml += "<li "+selectedClass +" title="+text+"><span value='"+optionVal+"'>"+text+"</span></li>";
}
 });


 return optHtml + "</ul>";
}


  return this;
};
})(jQuery);

三、用法實例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
   <link rel="stylesheet" href="mycombox.css" type="text/css" /> 
   <script type="text/javascript" src="jquery.min.js"></script>
   <script type="text/javascript" src="j.mycombox.js"></script>
<script type="text/javascript">
var s,s1 ;
$(document).ready(function(){
  s =  $("#city").mycombox();
       s1 = $("#bt").mycombox({optionDivHeight:200});


});

function getSelectedVal(){
var texts = "城市：值：「" + $("#city").val() + "」  顯示值:「" + $('#city option:selected').text() + 
         "」   標題：值：「" + $("#bt").val() + "」 顯示值:「" + $('#bt option:selected').text() + "」";
$("#dis").text(texts);
}


function reset(){
s.resetSelected();
s1.resetSelected();
}


function reload(){
  $("#city").val("gz");
  //若是selected內容沒有變化不須要使用該方法，否則會致使數據不許確；能夠用resetSelected方法代替
  s.reloadOption();
}
</script>
 </head> 


 <body>
     <div>
   一、reloadOption：從新加載option裏面的內容；注意:若是selected內容沒有變化不須要使用該方法，否則會致使數據不許確；能夠用resetSelected方法代替</br>
        二、resetSelected: 恢復selected元素值初始狀態
        
</div>
<table border=1>
<tr>
<td width="20px"><input type="button" onclick="reset();" value="重置"/></td>
<td width="20px">
<select id="city" name="city" title="城市" style="width:120px;height:25px;">
   <option value=""></option>
<option value="sh" selected>上海放假了有沒有有沒有</option>
<option value="bj">北京</option>
<option value="gz"> 廣州</option>
</select>
</td>
<td><select id="bt"  title="標題" style="width:120px;height:30px;">
   <option value=""></option>
<option value="bt1">標題1</option>
<option value="bt2">標題2</option>
<option value="bt3"> 標題3</option>
<option value="bt1">標題1</option>
<option value="bt2">標題2</option>
<option value="bt3"> 標題3</option>
<option value="bt1">標題1</option>
<option value="bt2">標題2</option>
<option value="bt3"> 標題3</option>
<option value="bt1">標題1</option>
<option value="bt2">標題2</option>
<option value="bt3"> 標題3</option>
<option value="bt1">標題1</option>
<option value="bt2">標題2</option>
<option value="bt3"> 標題3</option>
<option value="bt1">標題1</option>
<option value="bt2">標題2</option>
<option value="bt3"> 標題3</option>
<option value="bt1">標題1</option>
<option value="bt2">標題2</option>
<option value="bt3"> 標題3</option>
<option value="bt1">標題1</option>
<option value="bt2">標題2</option>
<option value="bt3"> 標題3</option>
</select></td>
<td><input type="button" onclick="getSelectedVal();" value="取得下拉框的值"/></td>
</tr>
</table>

<div>取值：<span id="dis"></span></div>



 </body>
</html>

效果圖：