Javascript 单击“移动选项”以选择下一个选项

我想在单击“下一步选择”时移动每个选项，以下是我目前得到的：

<form action="#" method="get">
<select multiple name="players" id="players">
    <option value="player">player</option>
    <option value="player1">player1</option>
    <option value="player2">player2</option>
</select>


<select multiple name="team" id="teams">
    <option value="team">team</option>
    <option value="team1">team1</option>
    <option value="team2">team2</option>
</select>

问题是，当我单击已经附加的元素时，它只是不想移动到“原始”选择。如何修复它

---

演示：

它不起作用，因为您在开始时，在移动任何内容之前分配事件。相反，将事件分配给不会更改的父级，并将其委托给选项

---

您无法将事件绑定到IE中的

选项

标记，IE中将失败，不支持

选项

标记上的事件

  $('#players option').each(function() {
  $(this).click(function() {
  $(this).appendTo('#teams');
  });
});

  $('#teams option').each(function() {
  $(this).click(function() {
  $(this).appendTo('#players');
  });
});

$('#players').on('click', 'option', function() {
  $(this).appendTo('#teams');
});

$('#teams').on('click', 'option', function() {
  $(this).appendTo('#players');
});