Question

我想将每个选项移动到下一个选择，这是我目前所拥有的：

<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>

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

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

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

演示：http://jsbin.com/ujugej/4/edit

Answer 1

它不起作用，因为你在开始之前，在移动任何东西之前分配事件。而是将事件分配给不会更改的父项，并将其委托给选项。 Docs

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

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

JSBin

点击下一步选择移动选项

1 个答案: