13 jQuery selectbox/ドロップダウンプラグイン

13 jQueryドロップダウンメニュープラグインは、Webインタラクティブエクスペリエンスを改善するのに役立ちます！この記事は、2016年10月12日に更新され、ドロップダウンメニュープラグインの現在のステータスを反映しています。

デフォルトのドロップダウンメニュースタイルは、誰にとっても満足のいくものではありません。外観を制御する必要がある場合があります（ブラウザやデバイス全体で一貫性を維持したり、ネイティブにサポートされていない他の機能が必要になる場合があります。

幸いなことに、このプロセスを簡素化できる優れたjQueryベースのプラグインがたくさんあります。

次のプロジェクトに統合できるプラグインをいくつかカバーします。これらのプラグインの一部には、高度に構成可能なオプション、方法、イベントがありますが、使いやすいシンプルなドロップダウンメニュースタイルの交換品です。

キーポイント

この記事では、Webページのドロップダウンメニューの外観と機能をカスタマイズするために使用できる13 jQuery Selectbox/Dropdownメニュープラグインの概要を説明します。
• 選択、Select2、Selecizeなどのプラグインは、幅広いカスタマイズオプションと、ドロップダウン検索、マルチ選択要素、ハイライト、リモートデータバインディングなどの追加機能を提供します。
JQuery Nice SelectやJQuery Selectboxなどのいくつかのプラグインは、ドロップダウンメニューの再設計にもっと焦点を合わせ、簡単なプロジェクトに適した高度な機能を提供します。
画像コンボボックスとddslick jQueryドロップダウンメニューにより、ドロップダウンメニューの各オプションに画像と説明を追加して、各選択肢を視覚的に表現することができます。
• この記事では、プラグインを選択する際にプロジェクトの要件を検討することの重要性を強調しています。一部のプラグインは、単純なプロジェクトには必要ない幅広い機能とカスタマイズオプションを提供しているためです。また、プラグインのブラウザの互換性とメンテナンスステータスをチェックすることの重要性も強調しています。
• chosen

Chosenは、ドロップダウンメニューを再設計するだけでなく、ドロップダウンメニュー検索、マルチ選択要素、ハイライトなどの他の機能を提供する強力なプラグインです。

ドロップダウンメニューのデフォルトスタイルを更新する場合は、このプラグインを使用できますが、その強力な機能は追加機能です：

マルチセレクトオプションを処理する

機能。各選択は保存され、必要に応じて簡単に削除されます。

検索によって要素をフィルタリングする機能。オプションの長いリスト（国名など）がある場合に非常に便利です。

• このプラグインのすべての機能は適切に機能します。デスクトップは、IE8互換性に戻るトレースをサポートします。正の（またはネガティブ）要因は、モバイルデバイスでは、ドロップダウンメニューがネイティブフォームに戻り、モバイルブラウザーがそれらとの対話方法を制御することです。
• オプションドキュメントは、要素をカスタマイズできるすべての設定、メソッド、およびイベントの概要を説明します。プラグイン自体は、収穫プロジェクト管理ツールの開発に関与する開発者によって維持されています。 GitHubリポジトリは、追加の機能、バグの修正、最適化で常に更新されています。

website/github

select2

select2は、完全に機能的でリッチなドロップダウンメニューの交換/拡張プラグインです。ドロップダウンメニューを再設計するだけでなく、追加の機能で拡張することもできます。

他の高度なドロップダウンメニュープラグインと同様に、次のような多くのカスタマイズ可能な機能が含まれています。

OptGroupsを使用した単一選択要素/要素

• 複数選択された要素
• ソート/フィルター可能なドロップダウンメニュー検索フィールド
• リモートデータソースからデータをロードする機能（たとえば、APIからオプションを動的に変更します）
• タグサポート（事前定義されたリストからの選択/ダイナミックタグ）
Select2は2012年から開発中です。開発者はバージョン3からバージョン4に移行し、プロセスのプラグインを書き直して、より速く、より応答し、モバイルに優しいものにしました。 Select2のGitHubページは印象的で、チームはリリースされるたびにプラグインをより良くするために協力しました。

プラグインは開発者により焦点を当てており、そのオプションページには、それぞれの機能を使用する方法の包括的な例が示されています。

このプラグインは高レベルのカスタマイズを提供します。プロジェクトに合わせてカスタマイズできるプラグインを探している場合は、素晴らしいオプションです。

webサイト/demo/github

jquery nice select

このプラグインは、軽量のドロップダウンメニュー交換ライブラリです。 jQuery nice selectデフォルトのネイティブドロップダウンメニューを再設計されたドロップダウンメニューに置き換えます。

このプラグインは、ドロップダウンメニューをすばやく再設計して、視覚的に魅力的なコンテンツをあまり労力なしで配信する方法として設計されているため、あまり機能していません。プラグインは、GitHubリポジトリで積極的に開発および改善されており、モバイルとデスクトップブラウザーの両方でうまく機能しています。

多くの労力をかけずにドロップダウンメニューを再設計するだけの迅速で簡単なプラグインを探しているなら、これはあなたの選択です。

ウェブサイトとデモ/github

を選択します

select2と選択したように、selectizeは非常に開発者指向であり、ドロップダウンメニューの仕組みを制御できます。彼らのドキュメントはかなり包括的であり、さまざまなオプションと、プラグインをさらにカスタマイズするためにフックできるいくつかのコールバックを概説しています。

プラグインは絶えず更新されており、開発者は過去1年間にいくつかのバージョンをリリースしています。発見した良いプラグインが積極的に維持されているのか、それとも「現状のまま」が提供されているのかどうかがわからない場合もありますが、選択するために、プロジェクトはまだアクティブであるように思われ、ほとんどすべての問題/バグレポートが解決され、かなり透明な議論が行われます。

機能の観点からは、非常にうまく動作を選択します。このプラグインは、デフォルトのコントロールを再設計するだけでなく、検索フィルタリング、マルチセレクト機能、リモートデータバインディングなどの強力な機能で展開します。これらはすべて、デスクトップおよびモバイルブラウザでうまく機能します。

このプラグインは非常に優れた全体的な選択であり、ドロップダウンメニューの機能を再設計して拡張する場合は、「好ましい」オプションの1つである必要があります。

ウェブサイトとデモ/github

（次のプラグインでコンテンツを紹介します。写真とhttps://www.php.cn/link/39cec6d4d21b5dade7544dab6881423e上記の形式に従って、テキストを調整して、よりスモーになり、よりスモーになります。ナチュラル）

画像コンボボックス

website/demo/github

jQuery検索可能なドロップダウンプラグイン

webサイト/demo

マルチセレクトコンボボックス

website/demo/github

jquery selectbox

ウェブサイトとデモ/github

multiselect.js

website/github

jquery sumoselect

website/demo/github

jQuery ui selectmenu

ウェブサイトとデモ

jQueryフィルター可能なブートストラップSELECT

demo/github

ddslick jqueryドロップダウン

ウェブサイト

概要

プラグインを交換するためのドロップダウンメニューを選択するための幅広いオプションがあります。過去数年にわたって、より人気のあるライブラリの一部が改善され、能力を向上させながら新しい機能を導入しました。

今日私が言及したさまざまなライブラリを検索して、どのライブラリがあなたのニーズを満たすのが最適かを確認する必要があります。たとえば、ドロップダウンメニューを再設計したい場合、フィルタリングとリモートのデータバインディングも提供するライブラリが本当に必要ですか？

これらのライブラリのほとんどについては、比較的迅速に稼働して実行できるはずです。ほとんどのライブラリには、jQueryおよび関連するプラグインファイルのみが必要であり、準備ができています。

カスタムオプションやフックコールバックに熱心である場合は、Selectize、chosen、select2などの開発者により焦点を当てたライブラリを選択することをお勧めします。あなたのために働くライブラリを見つけることはあなたの意見に依存します。

ドロップダウンメニューの交換を使用して他の優れたライブラリを使用する場合は、お知らせください。ご連絡をお待ちしております！

JQuery selectbox/dropdownメニュープラグイン（FAQ）

に関する

FAQ

（上記の形式に従ってテキストを調整して、よりスムーズで自然にするために）外部Webサイトや特定のファイルにアクセスする機能がないため、有効なhttps://www.php.cn/link/39cec6d4d21b5dade7544dab6881423eを提供することはできません。 https://www.php.cn/link/39cec6d4d21b5dade7544dab6881423e自分で補足する必要があります。 また、すべての写真への

パスを提供して、出力に画像情報を正しく追加できるようにしてください。

以上が13 jQuery selectbox/ドロップダウンプラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。