IE10選擇框菜單顯示上升

我在IE10中測試我的應用程序，發現選擇框有一個奇怪的行爲。突出顯示選項，上方/下方的選項顯示在選定的選項上方/下方。IE10選擇框菜單顯示上升

這隻發生在IE10中。 enter image description here

<!DOCTYPE html> 
<html> 
    <body> 
     <select> 
      <option value="One">One</option> 
      <option value="Two">Two</option> 
      <option value="Three">Three</option> 
      <option value="Four">Four</option> 

     </select> 
    </body> 
</html>

如何解決這個問題？

在此先感謝。

來源

2013-08-19 ssangadi276

請張貼一些代碼 –

這是IE10的select標籤的默認行爲。這是一個很好的外觀。

如果您仔細觀察，則根據分配的位置打開該選項。

我想通周圍使用jQuery工作，

var position = $("select").on('change', function() { position.find('option:selected').prependTo(position); });

它是如何工作的：

只要修改的選項，所選擇的選項將預置（以簡單地移動）到第一個位置。

我創建了一個JSFiddle來顯示它是如何工作的，在IE中檢查它。

如果您對此功能不感興趣，那麼您一直在尋找一些插件。

我最喜歡的插件是：

Chosen

Select2

希望您能理解。

來源

2013-08-20 07:19:01 Praveen

感謝@Praveen，解決方案幫了我很多。我根據自己的需求做了一些改變，我在下面發帖

var arr = ['1','2','3','4','5','6','7','8','9','10']; 
var selText = ""; 

function setDropdown() { 
    var str = ""; 
    $.each(arr, function(index, value){ 
     if (selText !== value) { 
      str += "<option value="+value+">"+value+"</option>"; 
     } 
    }); 

    $("select").empty().append($(str)); 
} 

setDropdown(); 

var position = $("select").on('change', function() { 

    var $el = position.find('option:selected'); 
    selText = $el.text(); 
    setDropdown(); 
    $el.prependTo(position); 
});

建議，歡迎提出。

來源

2014-07-16 11:05:52 skgyan

IE10選擇框菜單顯示上升

回答

相關問題