javascript - 在 IE 中从 DOM 中删除选项时滚动选择元素会跳转到顶部

Question

此问题似乎与 Internet Explorer 无关:

当使用 Javascript 双击时，我会将 option 标记从一个 select 移动到另一个。 select 元素可以包含许多项目，因此我使用 overflow: auto; 设置高度，以便它们滚动。如果向下滚动列表并双击要移动的项目，则当删除 option 时，select 列表将向上滚动到顶部，而不是停留在当前滚动的位置- 与 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:我希望停止滚动，但到目前为止我提出的最佳解决方案是在项目移动后重新滚动，如下所示: https://jsfiddle.net/yk8LeLbw/2/

Answer 1

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

这是一个工作 jsFiddle .

Note how I wrapped a div around each select and replaced the size="50" attribute with the multiple="true" attribute. This removes the scrollbar on the select elements.

$(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");
  });
});

Here's the modified CSS.

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