jquery.popSelect.jsを使って、select要素のoptionをポップアップで選択・選択解除する方法をご紹介します。
Contents
ディスプレイ広告
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>
jquery.popSelect.jsを使って、selectボックスのoptionをポップアップで選択・選択解除するデモページ
jquery.popSelect.jsを使って、selectボックスのoptionをポップアップで選択・選択解除するデモページ
ソース元:popSelect
以下がソース元です。
popSelect
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。