pickList.jsを使ってselectで選択した内容を別エリア(左右)に移動させ、右に移動させた選択内容を取得する方法をご紹介します。
Contents
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>
pickList.jsを使ってselectで選択した内容を別エリア(左右)に移動させ、右に移動させた選択内容を取得するデモページ
pickList.jsを使ってselectで選択した内容を別エリア(左右)に移動させ、右に移動させた選択内容を取得するデモページ
ソース元:pickList
以下がソース元です。
pickList
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告