IE10 Select box menu shows upside

Question

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 s

Answer 1

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.

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.

Answer 2

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.