将所选选项设置为选择框中的第一个选项

Question

在 IE 中打开 this link 以准确理解我将要描述的行为并寻求 hack。

我有以下 select 列表：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

当我在 IE 中呈现它时，与其他浏览器相比，它的下拉行为 发生了变化，因为某些选项被推到 [ 上方=38=]box 而其他的被推到下方（基于 selected 选项）

由于这是 IE的默认行为，我正在寻找的是选项应该重新排序，即用户 selects 应该成为第一个选项的选项。检查下图：

有人对此有变通办法吗？

此外，如果有人知道更改此默认 IE 行为的技巧，那么知道并了解这一点会很棒

这是正确的方法吗？

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
var choose = $("#choose").bind('change',function(){alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>

<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

</body>
</html>

Answer 1

这是一个适用于 Jquery 的方法：

HTML

<select id = "choose">
    <option value="null" name="volvo">Volvo</option>
    <option value="1" name="saab">Saab</option>
    <option value="2" name="mercedes">Mercedes</option>
    <option value="3" name="audi">Audi</option>
</select>

jQuery

var choose = $("#choose").bind('change',function(){
    choose.find('option:selected').prependTo(choose);
});

(Source)

完整代码

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      var choose = $("#choose").bind('change', function() {
        alert("hello");
        choose.find('option:selected').prependTo(choose);
      });
    });
  </script>

  <head>

    <body>

      <select id="choose">
        <option value="choose">choose</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>

    </body>

</html>

Answer 2

    <html>
<head>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            var selectedItem = $("#selectItem").bind('change', function () {
                selectedItem.find('option:selected').prependTo(selectedItem);
            });
        });
    </script>
    <head>
        <body>

            <select id="selectItem">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
            </select>

        </body>
</html>

谢谢...:)

将所选选项设置为选择框中的第一个选项

Set the selected option as the first option in the selectbox

html

select

internet-explorer-11

html-select

default