web入門
すばらしきwebの世界

リストボックスの要素を移動する

2016.07.23jquery, フロントエンド

2つのリストボックスを用意して、選択した要素を、片方のリストボックスへ追加するようなリストボックスを作成します。

実際の動きはこちらです。

作成するファイルは2つです。”http://ドメイン名” 以下に配置して下さい。

  1. index.html
  2. test.js


操作画面の作成

左右にリストボックスを作成します。
左のリストボックスに要素を3つ用意します。
右のリストボックスには要素を用意しません。

selectタグのidは左を “leftList” とし、右を “rightList” として下さい。
ボタンのidは左を “left-btn” とし、右を “right-btn” として下さい。

optionタグのvalueとidは任意の値で良いですが、必須です。


動作の作成

ボタン押下のイベントをきっかけとして、各々の処理をします。

左の要素を右へ移動する場合、以下の順で処理を行います。

  • 左リストで選択している要素のIDを取得する。
  • 左リストで選択している要素を取得する。
  • 選択した要素を左リストから削除する。
  • 選択した要素を、右リストへ追加する。

右から左はその逆になります。


最後に

コピペして使えます。
作成するのに結構時間かかりました。