IE10 Select box menu shows upside

问题

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.

<!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.

回答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:

Chosen
Select2

Hope you can understand.

回答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.

来源：https://stackoverflow.com/questions/18313867/ie10-select-box-menu-shows-upside

标签

internet-explorer-10

html-select