向上或向下移动所选选项 - 在 IE11 或 Edge 中保持可见不再有效？

Question

这是 htm/jquery 的一个简单片段，您可以将其剪切并粘贴到记事本中并保存运行在您的桌面上：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#moveup').click(function() {
  var opt = $('#sourceSelect option:selected');

  if(opt.is(':first-child')) {
    opt.insertAfter($('#sourceSelect option:last-child'));
  }
  else {
    opt.insertBefore(opt.prev());
  }
});
});

$(document).ready(function() {
$('#movedown').click(function() {

  var opt = $('#sourceSelect option:selected');

  if(opt.is(':last-child')) {
    opt.insertBefore($('#sourceSelect option:first-child'));
  }
  else {
    opt.insertAfter(opt.next());
  }
});
});
</script>
</head>
<body>
<select name="sourceSelect" id="sourceSelect" size="4">
  <option value="example1">Example1</option>
  <option value="example2">Example2</option>
  <option value="example3">Example3</option>
  <option value="example4">Example4</option>
  <option value="example5">Example5</option>
  <option value="example6">Example6</option>
  <option value="example7">Example7</option>
  <option value="example8">Example8</option>
  <option value="example9">Example9</option>
</select>

<input type="button" name="moveup" id="moveup" value="up" />
<input type="button" name="movedown" id="movedown" value="down" />
</body>
</html>

Select 一个项目，单击上移或下移按钮，该项目将......嗯，向上或向下移动！

问题是在 IE 或 Edge 中，一旦到达容器的底部或顶部，它 "moves" 就看不见了。容器不滚动。

Chrome、Firefox、Opera - 一切正常。

我尝试了多种方式（在 JQuery 中）移动 up/down。我试过 scrollIntoView 和 scrollTop。我需要一些方法来保持项目可见。

有人运行解决过这个问题吗？

Answer 1

不想将其标记为重复，因为我不得不花一些时间找到，这解决了您的 IE 问题。而且，它根本没有投票...

var showSelected = function(selector) {
    var thisSelect = $(selector);
    var thisIndex = thisSelect.find(":selected").index();
    var lastPos = 0;
    thisSelect.children().each(function() {
        lastPos++;
    });
    var currScrollPos = (thisIndex / lastPos) * parseInt(thisSelect[0].scrollHeight);
    thisSelect.scrollTop(currScrollPos);
}

$('#moveup').click(function() {
    var opt = $('#sourceSelect option:selected');
    if (opt.is(':first-child')) {
        opt.insertAfter($('#sourceSelect option:last-child'));
    } else {
        opt.insertBefore(opt.prev());
    };
    showSelected("#sourceSelect");
});

$('#movedown').click(function() {
    var opt = $('#sourceSelect option:selected');
    if (opt.is(':last-child')) {
        opt.insertBefore($('#sourceSelect option:first-child'));
    } else {
        opt.insertAfter(opt.next())[0];
    };
    showSelected("#sourceSelect");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sourceSelect" id="sourceSelect" size="4">
    <option value="example1">Example1</option>
    <option value="example2">Example2</option>
    <option value="example3">Example3</option>
    <option value="example4">Example4</option>
    <option value="example5">Example5</option>
    <option value="example6">Example6</option>
    <option value="example7">Example7</option>
    <option value="example8">Example8</option>
    <option value="example9">Example9</option>
</select>
<input type="button" name="moveup" id="moveup" value="up" />
<input type="button" name="movedown" id="movedown" value="down" />

也在 JSFiddle.

向上或向下移动所选选项 - 在 IE11 或 Edge 中保持可见不再有效？

Move Selected Option Up or Down - staying visible no longer works in IE11 or Edge?

jquery

internet-explorer

html-select

microsoft-edge