带有选择选项和CSS的JQuery

我正在设置两个select选项，并使用CSS和JQuery自定义这些选项。出现的问题是，当选择选项时，您需要“单击”选择选项的左上角，然后选项不会优雅地显示，它们会从选择框的中间滑出。是否有一种方法可以确保在单击“选择”选项的任何位置都会填充下拉列表，是否有一种方法可以确保下拉列表从“选择”框的底部显示，而不是从“选择”框中水平显示

以下是我的Jquery代码：

(function($){
  $.fn.extend({
    customStyle : function(options) {
       if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
          return this.each(function() {
            var currentSelected = $(this).find(':selected');
            $(this)
                .after('<span class="customStyleSelectBox"><span   class="customStyleSelectBoxInner">' +
               currentSelected.text() +
               '</span></span>')
                .css({
                    position: 'absolute',
                    opacity: 0,
                    fontSize: $(this).next().css('font-size')
                });
            var selectBoxSpan = $(this).next();
            var selectBoxWidth = parseInt($(this).width()) - 
                                 parseInt(selectBoxSpan.css('padding-left')) -
                                 parseInt(selectBoxSpan.css('padding-right'));          
            var selectBoxSpanInner = selectBoxSpan.find(':first-child');
            selectBoxSpan.css({display:'inline-block'});
            selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});

            var selectBoxHeight = parseInt(selectBoxSpan.height()) +  
                                  parseInt(selectBoxSpan.css  ('padding-top')) +  
                                  parseInt(selectBoxSpan.css('padding-bottom'));
            $(this).height(selectBoxHeight).change(function(){
                selectBoxSpanInner
                    .text($(this).find(':selected').text())
                    .parent().addClass('changed');
            });
          });
       }
     }
  });
})(jQuery);

$(function() {
   $('select').customStyle();
});

这里是我的测试页面的链接

---

谢谢

这不是最漂亮的解决方案，但请添加以下内容：

#facility, #stateSelect{
     height:100%;
}

---

并删除与两个选择框相关的高度内联样式。

不是最漂亮的解决方案，但添加以下内容：

#facility, #stateSelect{
     height:100%;
}

---

并删除与两个选择框相关的高度内联样式。

您可以简化

！$。browser.msie | |（$.browser.msie&&$.browser.version>6）

到

！$。browser.msie | |$.browser.version>6

您可以简化

！$。browser.msie | |（$.browser.msie&&$.browser.version>6）

到

！$。browser.msie | |$.browser.version>6