4

I was testing my application in IE10 and found a strange behavior for select box. The option selected is highlighted and options above/below are displayed above/below the selected one.

This happens only in 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>

How to fix this??

Thanks in Advance.

4

2 回答 2

4

这是标签的默认行为selectIE10。这是一个很好的外观。

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

在此处输入图像描述

我想出了一个解决方法jQuery，

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

这个怎么运作：

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

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

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

我最喜欢的插件是：

  1. 选择
  2. 选择2

希望你能理解。

于 2013-08-20T07:19:01.527 回答
0

感谢@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-16T11:05:52.273 回答