css + jquery 自定义下拉框

有没有厌倦了浏览器自带的selected选择框，下面分享一个自写的用jquey + css创建的下拉框方法：

1、样式定义：可以传入不同样式，定义自己的下拉框样式：

.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);

3、用法实例：

<!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>
   1、reloadOption：重新加载option里面的内容；注意:如果selected内容没有变化不需要使用该方法，不然会导致数据不准确；可以用resetSelected方法代替</br>
        2、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>

效果图：