Question

此问题似乎与Internet Explorer隔离：

当我们使用Javascript双击option个select标签时，我将select个标签从overflow: auto;移动到另一个select。 option元素可以包含多个项目，因此我已使用$(".listBoxSelectorAvail").dblclick(function() { $(this).find("option:selected").remove().appendTo(".listBoxSelectorAssigned"); }); $(".listBoxSelectorAssigned").dblclick(function() { $(this).find("option:selected").remove().appendTo(".listBoxSelectorAvail"); });设置高度，以便滚动。如果向下滚动列表并双击要移动的项目，{{1}}列表将在移除{{1}}时向上滚动到顶部，而不是像当它一样停留在当前滚动到的位置在Chrome或Firefox中。

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

Javascript非常简单：

{{1}}

我还没有找到任何具体原因导致这种情况发生 - 我不确定它是否是一个错误或是否是预期的行为，但有什么可以做的吗？

编辑：使标题更清晰

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

Answer 1

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

这是一个有效的jsFiddle。

请注意我是如何围绕每个div包裹select并将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;
}

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

1 个答案: