Question

我在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>

如何解决这个问题？

先谢谢。

Answer 1

这是 select 中IE10标记的默认行为。这是一个非常好的外观。

如果仔细观察，则会根据分配的位置打开该选项。

我已经找到了使用jQuery，
的工作
var position = $("select").on('change', function () { position.find('option:selected').prependTo(position); });

工作原理：

每当您更改选项时，所选选项将被预先（简单移动）到第一个位置。

我创建了一个JSFiddle来展示它是如何工作的，请在IE中查看。

如果您对此功能不感兴趣，那么您需要寻找一些插件。

我最喜欢的插件是：

Chosen

Select2

希望你能理解。

Answer 2

感谢@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);
});

欢迎提出建议。

IE10选择框菜单显示上行

2 个答案: