如何在選擇列表中顯示擴展選項？

Question

使用固定寬度選擇標籤時，IE中有一個錯誤。當select標籤中的選項內容大於select標籤的寬度時隱藏。它在火狐中運行良好，不在IE中。

alt text http://img691.imageshack.us/img691/4530/dropdown.gif

Answer 1

這是在IE中的一個錯誤，並且沒有辦法來解決這個問題，除了使選擇框寬：

<select style="width: 500px;"> 
    <option value="1"> 
    This is a very long option, but it's cool, cause the select is also very long 
    </option> 
</select> 

另一種選擇是使用一個框架，將取代與其他元素的風格組合的選擇框。它們的行爲就像一個選擇框，但需要javascript才能工作。

Answer 2

我從來沒有嘗試過，但你可以嘗試設置輸入字段

position: absolute 

和如

width: 500 

的onfocus，並將其設置回正常的onblur。你可能需要修改你的佈局，所以它不會晃動，但我想不出爲什麼這不應該工作。

Answer 3

我想出了一個解決方案（我沒有在我所有的谷歌搜索的地方找到）非常簡單：當用戶單擊選擇列表，換出類一個沒有寬度的限制。當他們做出選擇時，將該類交換回WITH寬度限制。

繼承人使用jQuery的示例。

$(function() { 

$(".SecuritySelect") 

    .mouseover(function(){ 
     $(this) 
      .data("origWidth", $(this).css("width")) 
      .css("width", "auto"); 
    }) 

    .mouseout(function(){ 
     $(this).css("width", $(this).data("origWidth")); 
    }); 

}); 

Answer 4

Hedgerwow有一個很好的解決這個問題：

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/bk/demo.php

它滴在一個非常漂亮的DHTML菜單，但確實很乾淨。堅實的修復。

Answer 5

列出的解決方案很差。一，我發現和使用是

$('select#CourtId') 
    .focus(function() { $('select#CourtId').css('position', 'relative').css('margin-right', '-300px').css('min-width', $('select#CourtId').css('width')).css('width', 'auto'); }) 
    .blur(function() { $('select#CourtId').removeAttr('style'); }); 

Answer 6

有一個項目在GitHub上了這是一個jQuery插件： http://css-tricks.com/select-cuts-off-options-in-ie-fix/

只是作爲：

$(document).ready(function() { 
    //all select lists expand to full width when selected 
    $("select").ieExpandSelectWidth(); 
});