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

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

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

2009-11-09 Wasim Shaikh

添加註解，因此我不會忘記再來這裏。據我所知，沒有解決方法 - 但也許有人知道一些事情。 – 2009-11-09 12:56:25

啊。剛剛發現了「最愛」按鈕。 :) – 2009-11-09 12:56:59

這是在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才能工作。

來源

2009-11-09 12:58:19 Marius

這不是一個錯誤，它是一個功能。 – epascarello 2009-11-09 15:31:05

lol classic .... +1 – 2010-09-27 19:09:42

是的，不推薦使用的功能！ – htm11h 2016-03-24 15:03:44

-1

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

position: absolute

和如

width: 500

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

來源

2009-11-09 13:01:26

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

繼承人使用jQuery的示例。

$(function() { 

$(".SecuritySelect") 

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

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

});

來源

2009-11-09 13:04:19

你應該用固定定位等方式做一些事情，因爲這會使頁面迴流。 – 2009-11-09 14:08:43

同意，這是一個黑客位的 – 2009-11-09 14:23:35

你可以把它放在一個div溢出：隱藏，一拉的答案來自一個http://stackoverflow.com/questions/586718/recommendations-for-dropdown-menu - 太寬了，這會導致你去http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the -Select-List.cfm。 – techpeace 2011-01-12 18:15:59

-1

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

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

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

來源

2009-11-30 22:34:16

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

$('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'); });

來源

2009-12-18 14:36:31

有一個項目在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(); 
});

來源

2012-12-19 20:19:27

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

回答

相關問題