selectで選択した内容を別エリア（左右）に移動させる方法【pickList.js】｜DAD UNION

Webサイトでユーザーがリストから項目を選択し、別のエリアに移動できる機能は、多くの場面で役立ちます。例えば、管理画面でのユーザー選択や、フォームでの複数選択などが挙げられます。
本記事では、pickList.js を使って、select で選択した内容を別エリアに移動させる方法を解説します。さらに、移動させた選択内容を取得する方法も紹介するので、ぜひ参考にしてください。

Contents

selectで選択した内容を別エリア（左右）に移動させるCSSの記述
selectで選択した内容を別エリア（左右）に移動させるHTMLの記述
pickList.jsを使ってselectで選択した内容を別エリア（左右）に移動させ、右に移動させた選択内容を取得するJavaScriptの記述
pickList.jsを使ってselectで選択した内容を別エリア（左右）に移動させ、右に移動させた選択内容を取得するデモページ
ソース元：pickList
まとめ

selectで選択した内容を別エリア（左右）に移動させるCSSの記述

※bootstrap.min.css、bootstrap-theme.min.css、pickList.cssファイルを読み込みます。bootstrapを使用せず自分で作ったCSSでも大丈夫です。必要に応じて変更して下さい。

      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  rel="stylesheet">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"  rel="stylesheet">
      <link href="pickList.css"  rel="stylesheet">

selectで選択した内容を別エリア（左右）に移動させるHTMLの記述

※id=”pickList”にselectの内容を出力します。id=”getSelected”ボタンクリックで選択内容を取得します。

      <div class="container">
         <div class="panel panel-default">
            <div class="panel-heading">
               <h1 class="panel-title">selectで選択した内容を別エリア（左右）に移動させます。1つ選択して「右へ移動→」をクリックしてみて下さい。</h1>
            </div>
            <div class="panel-body">

               <div id="pickList"></div>

               <br><br>
               <button class="btn btn-primary" id="getSelected">選択内容を配列で取得（Consoleに出力されます）</button>
            </div>
         </div>
      </div>

pickList.jsを使ってselectで選択した内容を別エリア（左右）に移動させ、右に移動させた選択内容を取得するJavaScriptの記述

※jquery.min.js、bootstrap.min.js、pickList.jsファイルを読み込みます。valにselectの内容を配列で用意します。$(select出力エリア).pickList(用意した配列)でselectの内容を設定します。pick.getValues()で選択内容を取得出来ます。

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script src="pickList.js"></script>
      <script>

         var val = {
            01: {id: 01, text: 'てんびん座'},
            02: {id: 02, text: 'さそり座'},
            03: {id: 03, text: 'おとめ座'},
            04: {id: 04, text: 'しし座'},
            05: {id: 05, text: 'かに座'},
            06: {id: 06, text: 'おひつじ座'},
            07: {id: 07, text: 'いて座'},
            08: {id: 08, text: 'やぎ座'},
            09: {id: 09, text: 'みずがめ座'},
            10: {id: 10, text: 'うお座'},
            11: {id: 11, text: 'おうし座'},
            12: {id: 12, text: 'ふたご座'}
         };

         var pick = $("#pickList").pickList({data: val});

         $("#getSelected").click(function () {
            console.log(pick.getValues());
         });

      </script>