用 Jquery 模拟 select

(function($) {
  $.fn.combox = function(options) {
    var opts = $.extend({}, $.fn.combox.defaults, options);
    return this.each(function() {
      var self = $(this);
      $(this).attr("visibility",false);
      var j = self[0].selectedIndex;
 
      if(self.css("width") == "auto")
        var w = opts.sel_min_width;
      else if(parseInt(self.css("width")) != 0)
        var w = self.css("width");
      else
        var w =  opts.sel_min_width;
 
      var pid = opts.prefix_id+self.attr("name");
      $('<div>'+self.children().eq(j).text()+'</div>').css({
        "position":"absolute",
        "width":w,
        "height":self.css("height"),
        "top":self.offset().top,
        "left":self.offset().left,
        "background":"url(down.gif) no-repeat right -1px",
        "border":"1px solid #bbb",
        "fontSize":"12px",
        "lineHeight":self.css("height"),
        "textIndent":"5px"
      }).appendTo("body").show();
 
      $("#"+pid).click(function(){
        var cid = "child_"+self.attr("id");
        if($("#"+cid).length &gt; 0){
          $("#"+cid).css({"border":"1px solid #bbb"}).show();
          $("#"+cid).children().show();
        }else{
          var t = parseInt($("#"+pid).css("top")) + parseInt($("#"+pid).css("height")) + 1 + "px";
          var w = parseInt($("#"+pid).css("width")) + "px";
          $('<div></div>').css({
            "position":"absolute",
            "width":self.css("width"),
            "top":t,
            "left":$("#"+pid).css("left"),
            "width":w,
            "background-color":opts.div_bg_color,
            "border":"1px solid #bbb",
            "z-Index":opts.over_div_index+1
          }).appendTo("body");
 
          $('<ul></ul>').css({
            "listStyle":"none",
            "margin":0,
            "padding":0,
            "fontSize":opts.font_size
          }).mouseover(function(){
            $(this).show();
            $("#"+cid).css({"border":"1px solid #bbb"});
          }).mouseout(function(){
            $(this).hide();
            $("#"+cid).css({"border":"0px","z-ndex":opts.over_div_index-1});
          }).appendTo($("#"+cid));
 
          self.children().each(function(i){
            $("<li>"+$(this).text()+"</li>").css({
               "height":"20px",
               "lineHeight":"20px",
               "textIndent":"5px"
            }).mouseover(function(){
               $(this).css({"background-color":opts.over_bg_color,"color":"#fff"});
            }).mouseout(function(){
               $(this).css({"background-color":"#FFFFFF","color":"#000"});
            }).click(function(){
               $("#"+pid).html($(this).text());
               self[0].selectedIndex = i;
               $("#"+cid).hide();
            }).appendTo($("#ul_"+cid));
         });
       }
    });
    $(this).css("display","none");
  });
};
 
       $.fn.combox.defaults = {
	 prefix_id:"div_",
	 sel_min_width:"150px",
	 div_bg_color:"#fff",
	 over_bg_color:"#999966",
	 over_div_index:10,
	 font_size:"12px"
	}
})(jQuery);