IE10 Select box menu shows upside

2019-02-18 00:08发布

站内问答 / 前沿技术
536 2 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.

2条回答
淡お忘
2楼-- · 2019-02-18 00:20

This is the default behavior of select tag in IE10. That is a pretty good look.

If you watch carefully, the option is opened based on the position allotted.

enter image description here

I have figured a work around using jQuery,

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

How it works:

Whenever you change an option, the selected option will be prepended(in simple moved) to the first position.

I have create a JSFiddle to show how it works, check it in IE.

If you're not interested in this feature, then you have look for some plugins.

My most favorite plugins are:

  1. Chosen
  2. Select2

Hope you can understand.

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
3楼-- · 2019-02-18 00:35

Thanks to @Praveen, solution helped me a lot. I made few changes as per my need which I am posting below 

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);
});

Suggestions are welcome.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)