Question

我正在设置两个选择选项并使用CSS和JQuery自定义这些选项。发生的问题是在选择选项时，您需要在选择选项的左上角“单击”，然后选项不会正常显示，它们会从选择框的中间滑出。有没有一种方法可以确保在您点击选择选项的任何地方，下拉列表将填充并且是否有一种方法可以确保从选择框的底部出现下拉菜单，而不是从选择框中水平移出？< / p>

这是我的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();
});

这是我的CSS：

span.customStyleSelectBox 
{
width:224px; 
font-size:14px;
font-family:Tahoma; 
background:url(../images/dropdown.png) no-repeat; 
color:#838383; 
padding:5px 7px; 
border:0px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border-radius: 15px 15px; 
}
span.customStyleSelectBox.changed 
{ 
background-color: #FFFFFF; 
}
.customStyleSelectBoxInner 
{ 
}

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

http://mdcolley.somee.com/map.asp

谢谢

Answer 1

I don't see a problem with the code you posted

Answer 2

不是最漂亮的解决方案，只需添加：

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

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

JQuery使用选择选项和CSS

2 个答案: