Javascript 在选择列表之间移动选项时消失元素

我有一个用户界面，用户可以在两个选择列表之间移动多个选项。看起来就像这里的模型：

选择一个或多个项目，然后按箭头按钮，它会将它们移动到另一个列表中

问题是，我有一个排序功能，在选项被移动后，它会求助于选项，真的很奇怪的事情正在发生。第一次将选项从左向右移动时，效果很好。如果将另一项从左向右移动，它将覆盖已存在的内容。但是如果你再次点击左边的列表，这些项目就会像平常一样出现！如果您检查dom，您可以看到项目在那里，没有任何css规则会使它们不显示，并且当它们再次显示时，看起来不会应用任何额外的css。移动项目的代码如下所示：

$('#moveRight').click(function () {

  // Get all selection options
  var selectedOptions = $('#from option:selected');

  // Let's remove our items from the from list...
  $('#from option:selected').remove();

  // Add them to the to list...
  $('#to').append(selectedOptions);

  // Sort alphabetically
  $('#to option').sort(sortAlpha).appendTo('#to');
});

我用界面的一个工作示例创建了这个代码笔：

复制步骤：

突出显示左侧列表中任意数量的选项。 单击->按钮。 突出显示左侧列表中任意数量的选项。 单击->按钮。 请注意，新项目是列表中唯一显示的项目，但如果再次单击左侧列表，它们都会显示！该错误似乎出现在排序中，因为删除该选项可修复此问题

---

有相同的问题，但似乎他们通过删除排序解决了它。这是一种新的行为——几年前部署这段代码时没有这样做，这就是为什么使用jquery。顺便说一句，我仍然希望在移动选项后对其进行排序。有人知道这里发生了什么吗？

这似乎是一个浏览器渲染错误。我无法确切地解释为什么会发生这种情况，但在快速分离/删除/附加操作之后使用排序逻辑似乎会导致浏览器渲染器混淆。如果查看DOM检查器，可以看到option元素位于正确的位置，但是渲染器不会显示它们

我建议将此作为一个bug向浏览器供应商提出

我找到的唯一解决方法是在目标select上触发一个焦点事件，以强制在DOM中重新绘制元素。该修复不需要模糊，只是为了避免CSS轮廓出现在选定元素周围，这有点不协调

还要注意，我使用select元素和按钮上的数据属性对逻辑进行了泛化

设els={ from:$‘from’， 收件人：$‘收件人’ }; $'.move'。单击函数{ 让$target=els[this.dataset.target]； 让$source=els[this.dataset.source]； $source.children'选项：选中。附加到$target； $target.children'option'.sortsortAlpha.appendTo$target； $target.focus.blur； }; 让sortAlpha=a，b=>parseInta.textContent，10>parseIntb.textContent，10？1 : -1; 身体{ 背景色：a3d5d3； } 挑选{ 宽度：200px； 高度：200px； } 钮扣{ 宽度：100px； 填充物：5px； 保证金：0 5px 5px 5px； } 按钮容器{ 显示：内联块； 垂直对齐：顶部； } 1. 2. 3. 4. 5. 6. 7. 8. 9 10 - -

---

这真是太棒了@rory；非常感谢！我来看看归档chrome bug有多难。