从 IE 中的 DOM 中删除选项时，滚动选择元素跳转到顶部

Question

此问题似乎与 Internet Explorer 无关：

当使用 JavaScript 双击它们时，我将 option 标记从一个 select 移动到另一个。 select 元素可以有很多项目，所以我用overflow: auto; 设置了高度，以便它们滚动。如果您向下滚动列表并双击要移动的项目，select 列表将在删除 option 时向上滚动到顶部，而不是像在 Chrome 或 Firefox 中那样停留在当前滚动到的位置.

我在这里做了一个基本的例子来证明这一点：https://jsfiddle.net/yk8LeLbw/1/

Javascript 非常简单：

 $(".listBoxSelectorAvail").dblclick(function() {
     $(this).find("option:selected").remove().appendTo(".listBoxSelectorAssigned");
 });
 $(".listBoxSelectorAssigned").dblclick(function() {
   $(this).find("option:selected").remove().appendTo(".listBoxSelectorAvail");
 });

我无法找到发生这种情况的任何具体原因 - 我不确定这是错误还是预期行为，但有什么可以做的吗？

编辑：使标题更清晰

编辑 2：我希望 stop 滚动，但到目前为止我提出的最佳解决方案是在项目移动后重新滚动，如下所示： https://jsfiddle.net/yk8LeLbw/2/

Answer 1

问题在于 IE 的行为不同。因此，我们必须解决这种不受欢迎的行为。解决方案是将select 包装在div 中并使用一些CSS。

这是一个有效的jsFiddle。

注意我是如何在每个select 周围包裹一个div 并将size="50" 属性替换为multiple="true" 属性。这会移除 select 元素上的滚动条。

$(document).ready(function() {
  var arr1 = [];
  var arr2 = [];
  arr1.push("<div class='scroll'><select class='listBoxSelectorAvail' multiple='true'>");
  arr2.push("<div class='scroll'><select class='listBoxSelectorAssigned' multiple='true'>");
  for (var i = 0; i < 20; i++) {
    arr1.push("<option value=\"" + i + "\">Option " + i + "</option>");
  }
  arr1.push("</select></div>");
  arr2.push("</select></div>");
  $("body").append(arr1.join(""));
  $("body").append(arr2.join(""));
  $(".listBoxSelectorAvail").dblclick(function(e) {
    $(this).find("option:selected").remove().appendTo(".listBoxSelectorAssigned");
  });
  $(".listBoxSelectorAssigned").dblclick(function(e) {
    $(this).find("option:selected").remove().appendTo(".listBoxSelectorAvail");
  });
});

这是修改后的 CSS。

select {
  width: 200px;
  height: 200px;
}
.scroll {
  overflow: auto;
  display: inline-block;
  margin-left: 10px;
}