ワイズリマインダー

selectボックス内の検索と項目をリアルタイムに追加できるプラグインを作ってみた

 

使い方やプラグインのダウンロードはこちらから

 

既存のセレクトタグ内で部分一致の検索が行えます。
また、プルダウンリストにないものを即時に追加することも可能です。

index.html

<head>
<link rel="stylesheet" href="jquery.vselect.css">
<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
<script charset="UTF-8" src="jquery.vselect.js"></script>
<script charset="UTF-8" src="index.js" defer></script>
</head><body>
 <select class="vselect" style="width: 200px;">
  <option></option>
  <option>あいうえお</option>
  <option>かきくけこ</option>
  <option>さしすせそ</option>
  <option>たちつてと</option>
  <option>なにぬねの</option>
  <option>はひふへほ</option>
  <option>まみむめも</option>
  <option>やゆよ</option>
  <option>らりるれろ</option>
  <option>わをん</option>
 </select>
</body>

index.js

'use strict';
(function($){
  $(document).ready(function(){

    $('select.vselect').vSelect(OPTION);

  });
})(jQuery);

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

検索

最近のコメント

最近の投稿

タグ

フィード配信

アーカイブ

外部リンク