選択結果を確認できる複数項目選択GUI

jQuery UI の Selectable プラグインを使った、複数項目選択 GUI で、選択した結果を表示し、確認できるようにする方法。項目をクリックすると、項目を選択できる。選択した項目は、文字色と背景色を反転させ目立たせる。さらに、選択リストのボックスの上に、選択した項目名を表示する。
「Ctrl」キーを押しながら、項目をクリックすると、複数の項目を選択できる。複数の項目を選択した場合も、選択ボックスの上に、選択した複数の項目名をカンマ（,）区切りで表示する。

実装例（サンプル）

選択した項目: なし

• 項目 1 ,
• 項目 2 ,
• 項目 3 ,
• 項目 4 ,
• 項目 5 ,
• 項目 6 ,
• 項目 7 ,

実装例の動作について

• 「項目 1」をクリックすると、「項目 1」の色が反転し、選択状態となる。選択リストのボックスの上の「選択した項目: 」の右横に、「項目 1 , 」と表示する。
• 「項目 3」の上でクリックしたまま、「項目 5」の上までカーソルを動かしクリックを解除すると、「項目 3」「項目 4」「項目 5」の色が反転し、選択状態となる。選択リストのボックスの上の「選択した項目: 」の右横に、「項目 3 , 項目 4 , 項目 5 , 」と表示する。
• 「項目 2」をクリックし、「項目 2」の色を反転させ選択状態とし、「Ctrl」キーを押しながら、「項目 5」と「項目 7」をクリックすると、「項目 2」「項目 5」「項目 7」の色が反転し、選択状態となる。選択リストのボックスの上の「選択した項目: 」の右横に、「項目 2 , 項目 5 , 項目 7 , 」と表示する。

実装例のソースコード

読み込み

読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML