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

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

Contents

select要素のoptionをポップアップで選択・選択解除するCSS記述
select要素のoptionをポップアップで選択・選択解除するHTML記述
jquery.popSelect.jsを使って、select要素のoptionをポップアップで選択・選択解除するJavaScriptの記述
jquery.popSelect.jsを使って、selectボックスのoptionをポップアップで選択・選択解除するデモページ
ソース元：popSelect

select要素のoptionをポップアップで選択・選択解除するCSS記述

※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要素のoptionをポップアップで選択・選択解除する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>

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

※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>