select要素のoptionをポップアップで選択・選択解除する方法【jquery.popSelect.js】｜DAD UNION

jquery.popSelect.jsを使って、select要素のoptionをポップアップで選択・選択解除する方法をご紹介します。

Webアプリケーションや動的なフォームを作る際、ユーザーが選択肢を視覚的に操作できると便利ですよね。
そこで登場するのが jquery.popSelect.js です。このプラグインを使うと、select要素の選択肢をポップアップ形式で直感的に操作できるようになります。

本記事では、HTML・CSS・JavaScriptの基礎知識を持つエンジニアを対象に、jquery.popSelect.jsの基本的な使い方とカスタマイズ方法を解説します。

Contents

事前準備
select要素のポップアップ操作に必要なCSS設定
select要素をHTMLで構築
jquery.popSelect.jsを使って、select要素のoptionをポップアップで選択・選択解除するJavaScriptの記述
jquery.popSelect.jsを使って、selectボックスのoptionをポップアップで選択・選択解除するデモページ
まとめ

事前準備

このプラグインを使用するためには以下のファイルが必要です。

jquery.js（必須）
jquery.popSelect.min.js（必須）
bootstrap.css（任意）
jquery.popSelect.css（推奨）

まずは、これらのファイルをプロジェクトに追加しましょう。ファイルがない場合は、popSelect公式リポジトリからダウンロードしてください。

select要素のポップアップ操作に必要なCSS設定

以下にCSS設定のサンプルコードを示します。このコードは、selectボックスのデザインを調整するための基本的なスタイルです。
bootstrap.css、jquery.popSelect.cssファイルを読み込みます。select要素エリア（.service-box、.select-container、#example）のCSS記述です。必要に応じて変更して下さい。

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="jquery.popSelect.css">

<style type="text/css">
body{
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  padding: 20px 0;
  line-height: 2em;
}
.service-box {
    margin: 50px auto 0;
    max-width: 400px;
}
.service-box .select-container {
    padding: 35px 0;
}
#example {
    width: 400px;
}
</style>

このコードを自身のプロジェクトにコピーして貼り付けることで、簡単にスタイルを適用できます。

select要素をHTMLで構築

次に、ポップアップ操作が可能なselect要素をHTMLで定義します。
select要素エリア（id=”example”）にoptionを複数用意します。以下にサンプルコードを示します。

<h1>jquery.popSelect.jsを使って、selectボックスのoptionをポップアップで選択・選択解除します<br>。以下は全て選択状態になってるので、マウスオーバーの「×」クリックで選択解除できます。</h1>

<div class="service-box">
  <div class="select-container">

    <select id="example" multiple>
      <option value="HTML" selected="selected">HTML</option>
      <option value="CSS" selected="selected">CSS</option>
      <option value="JavaScript" selected="selected">JavaScript</option>
      <option value="PHP" selected="selected">PHP</option>
      <option value="JAVA" selected="selected">JAVA</option>
      <option value="C#" selected="selected">C#</option>
      <option value="C++" selected="selected">C++</option>
      <option value="Ruby" selected="selected">Ruby</option>
      <option value="Python" selected="selected">Python</option>
      <option value="VisualBasic" selected="selected">VisualBasic</option>
      <option value="Perl" selected="selected">Perl</option>
      <option value="Swift" selected="selected">Swift</option>
      <option value="SQL" selected="selected">SQL</option>
    </select>

  </div>
</div>

このコードでは、複数選択可能なselectボックスを作成し、デフォルトでいくつかの選択肢を選択状態にしています。

jquery.popSelect.jsを使って、select要素のoptionをポップアップで選択・選択解除するJavaScriptの記述

最後に、JavaScriptを使ってjquery.popSelect.jsを初期化します。
jquery.js、jquery.popSelect.min.jsファイルを読み込みます。$(‘#example’).popSelect({オプション})を設定します。

<script src="jquery.js"></script>
<script src="jquery.popSelect.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

      $('#example').popSelect({
        showTitle: false,
        autoIncrease: true
      });

    });
</script>

このスクリプトを追加することで、selectボックスがポップアップ形式で操作できるようになります。