select要素の複数選択フォームを実装「Multiple Select」

tags:,

select要素の複数選択フォームを実装できるjQueryプラグイン「Multiple Select」を紹介します。

jQueryプラグイン「Multiple Select」

jQueryプラグイン「Multiple Select」、サクッとselect要素の複数選択フォームを実装できるプラグインです。デモのサンプルコードをみてもらうと分かるのですが、本当に簡単です。

スポンサーリンク

デモのページ上部にあるフォームをクリックすると、select要素のふわっと表示されるので、いくつか選択してみてください。

「Multiple Select」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Multiple Selectのデモ - jQuery Plugin</title>
<meta name="description" content="Multiple Selectのサンプル/デモでーす。">
<meta name="robots" content="noindex, nofollow">
<link href="multiple-select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<h1>Multiple Selectのデモで〜す。</h1>
  <select id="select" style="width:300px;">
    <option value="1">foo</option>
    <option value="2">bar</option>
    <option value="3">baz</option>
    <option value="4">qux</option>
  </select>
  <script src="jquery.multiple.select.js"></script>
  <script>
    $(function() {
      $("#select").multipleSelect();
    });
  </script>
</body>
スポンサーリンク

関連記事と広告