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

2023.04.11

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

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);

古い記事へ≫

コメントを残すコメントをキャンセル

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

ワイズリマインダー

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

コメントを残すコメントをキャンセル

検索

最近のコメント

最近の投稿

タグ

フィード配信

アーカイブ

外部リンク

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

コメントを残す コメントをキャンセル

検索

最近のコメント

最近の投稿

タグ

フィード配信

アーカイブ

外部リンク

コメントを残すコメントをキャンセル