選択オプションとCSSを使用したJQuery

Question

2つの選択オプションを設定し、これらのオプションを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(); 
}); 

は私の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%; 
} 

をし、2つの選択ボックスに関連する高さインラインスタイルを削除します。