1

クリックして次の選択に各オプションを移動したいのですが、現在私が持っているものは次のとおりです。

<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

4

1 に答える 1

0

何かが移動される前に、最初にイベントを割り当てているため、機能していません。代わりに、変更されない親にイベントを割り当て、オプションに委任します。ドキュメント

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

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

JSBin

于 2013-03-10T13:08:03.823 に答える