・シンプルでおしゃれなマルチセレクトボックスを作りたい
・操作しやすいマルチセレクトボックスがほしい
こう思っていた以前の私に向けて、記事を作成しました。
マルチセレクトボックスは使う機会がなく、たいていはチェックボックスをたくさん置く事が多かったです。ちょうど真剣に向き合う機会があり、色々調べた結果を整理して書いていきます。
はっきり言ってとても簡単に作れます！
まずはサンプルをご紹介します！
空のhtmlファイル（demo.html等）を作成し、当ページのサンプルソースを貼り付けて、ブラウザで実行すると、すぐに動作確認できます！
CDNを使うとライブラリのダウンロードも不要で以下のコピペだけで実装終了です！
HTML / JavaScript / jQuery / css
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>
<!-- jQueryライブラリ読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- /jQueryライブラリ読み込み -->
<!-- 独自ライブラリ読み込み -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<!-- /独自ライブラリ読み込み -->
</head>
<body>
<!-- Select2で作るマルチセレクトボックス -->
<select class="js-multiple" multiple="multiple" style="width:200px;">
<option>リンゴ</option>
<option>ゴリラ</option>
<option>ラッパ</option>
<option>パイナップル</option>
</select>
<!-- ############ javascript ############ -->
<script type="text/javascript">
$(document).ready(function() {
// Select2でセレクトボックスをつくる.
$('.js-multiple').select2();
});
</script>
<!-- ############ /javascript ############ -->
</body>
</html>公式サイトはこちらです。
https://select2.org/
ライブラリもCDNを使えば、ライブラリのダウンロードなんていりません！コピペするだけで実装完了です！
なんて簡単なんでしょうか！
optionタグで中身を作成せず、javascriptでプルダウンの中身を指定することもできます。
/**
* セレクトボックスの中身.
*/
var sentakushi = {
monkey : 'リンゴ',
rabbit : 'ゴリラ',
possum : 'ラッパ',
ponsuke : 'パイナップル'
};
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>
<!-- jQueryライブラリ読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- /jQueryライブラリ読み込み -->
<!-- 独自ライブラリ読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript" src="js/mySelect2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- /独自ライブラリ読み込み -->
</head>
<body>
<!-- Select2で作るマルチセレクトボックス -->
<select class="js-multiple2" multiple="multiple" style="width:200px;"></select>
<!-- ############ javascript ############ -->
<script type="text/javascript">
/**
* セレクトボックスの中身.
*/
var sentakushi = {
monkey : 'リンゴ',
rabbit : 'ゴリラ',
possum : 'ラッパ',
ponsuke : 'パイナップル'
};
$(document).ready(function() {
// セレクトボックスの中身を設定する.
let options = $.map(sentakushi, function(text, value) {
let option = $('<option>', {value: value, text: text});
return option;
});
$('.js-multiple2').append(options);
// Select2でセレクトボックスをつくる.
$('.js-multiple2').select2();
});
</script>
<!-- ############ /javascript ############ -->
</body>
</html>よかったら、ＳＮＳでシェアして頂けると嬉しいです！
今後の励みにもなりますので、よろしくお願いします！
