セレクトボックス間(multiple)でのデータの移動

動くサンプルはこちら。複数選択可能なセレクトボックス(multiple)間でのデータの移動方法を見ていきます。早速コードを見てみましょう。

やり方は色々あるでしょうが、上記のようにしました。clickイベントの付与時に、第2引数を使って、イベントハンドラにデータを渡しています。 あまり見ないですが、このような事ができます。イベントハンドラ側では、event.data を使って、このデータを受け取ることができます。 つまりこれで、どのIDのセレクトボックスの選択済みオプションを操作するか、そして、どのIDのセレクトボックスに.appendTo()するかが決まります。 そして、.appendTo()ですが、既にドキュメント上に存在する要素に対して行うと、その要素は、移動することになります。ですので、上記でOKです。そして.appendTo()の後は、そのオプションを非選択の状態に設定しています。

最後のイベント設定は、「送信」ボタンなどを押してフォームを送信する際に、「カート」側のオプションが、選択済みになるためのイベント設定です。通常、サーバなどにデータを送信する為に存在していると思いますので。以上で終了ですが、まだ続きがあります。上記のmoveOption関数は、一部無駄な書き方があります。どこか分かるでしょうか?少し簡潔化させると、以下のようになります。

そもそも、.each()とか書く必要がないのです。何となく、.each()とか使ってしまいがちですが、jQueryメソッドは、基本的に全てのオブジェクトに対して何か処理するようにできているものです。(一部例外はあり)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です