プロジェクトに魅力のない選択ボックスが含まれていて、それらにさらに機(jī)能を追加する場(chǎng)合は、選択されたものとSelect2が非常に便利であることがわかります。これらは、選択したボックスのスタイルをスタイリングして外観を向上させ、動(dòng)作をカスタマイズし、よりユーザーフレンドリーにするのに役立つ2つのjQueryプラグインです。 この記事では、これらの2つのプラグインを真っ直ぐに配置し、それらの機(jī)能とユースケースを比較して、どちらに最適かについて情報(bào)に基づいた選択をすることができます。
キーテイクアウト
chosen and select2は、選択したボックスの機(jī)能を強(qiáng)化するjQueryプラグインであり、外観と使いやすさを向上させます。選択されたものは信頼性が高く堅(jiān)牢なプラグインですが、select2ほどアクティブに維持されていないため、新しい機(jī)能と統(tǒng)合を定期的に追加します。 両方のプラグインがプレースホルダーテキストをサポートし、オプション內(nèi)で検索を許可し、選択の數(shù)を制限する機(jī)能を提供します。ただし、select2は、ドロップダウンが開(kāi)いているときにオプションを選択解除するオプションも提供します。これは、選択された機(jī)能ではまだ実裝されていません。
Select2は、プログラマティックアクセス、タグ付け、トークン化、テンプレートなど、追加の機(jī)能で際立っています。また、Ajaxをサポートし、より高度なカスタマイズオプションを提供しているため、選択したボックスのより強(qiáng)力なツールになります。
選択されたものは、基本的な選択ボックスの拡張に適したオプションですが、より高度な機(jī)能と定期的な更新にはselect2が推奨されます。 Select2は包括的なドキュメントも提供しており、プロジェクトでの実裝と使用を容易にします。- インストール
- 選択されたものとselect2の両方がGithubを介して利用できます。これは、それぞれのリポジトリをクローンして、必要なファイルを取得できることを意味します。 それ以外の場(chǎng)合は、Bower（githubへのインターフェイスとして機(jī)能する）の両方のプラグインをインストールできます。 Bowerがあなたの好みのルートである場(chǎng)合、あなたがそれにいる間にjQueryをつかむこともできます。
-
それ以外の場(chǎng)合は、選択したCDN（CDNJなど）からファイルをつかみ、通常の方法でページに含めます。これは私が以下のテンプレートで行ったことです。これを使用して、チュートリアルの例に従うことができます。
chosen
<span>git clone https://github.com/harvesthq/chosen.git </span><span>git clone https://github.com/select2/select2.git </span>
select2
bower <span>install jquery </span>bower <span>install select2 </span>bower <span>install chosen </span>
プロジェクトは積極的に維持されていますか？
select2と対照的で、違いは顕著です。このライブラリの開(kāi)発は完全に蒸気を取り、最近公式の4番目のバージョン（4.0.0）をリリースしました。これは、新しい機(jī)能が追加され、他の機(jī)能が非推奨または削除されていることを意味します。 別の有用なメトリックは、スタックオーバーフロー上のこれらのタグを使用した質(zhì)問(wèn)の量です。ここで自分で試すことができます：http：//stackoverflow.com/tags
「select2」を入力してから「選択」と対比すると、select2プラグインの周りにはるかに多くのアクティビティがあるように見(jiàn)えることがわかります。また、AngularjsやRuby on Railsなど、多くの統(tǒng)合があることもわかります。
ボックスとプレースホルダーを選択
select2と選択した選択は、シンプルな選択ボックスと複數(shù)の選択ボックスの表示方法を変更します。
純粋なHTMLを使用した複數(shù)の選択ボックスでは、ユーザーはリストで利用可能なオプションの一部を確認(rèn)できます。これは視覚的に魅力的ではなく、この見(jiàn)解に変更を加える必要があります。選択してselect2「リストビュー」を削除すると、選択ボックスの內(nèi)部をクリックするとオプションのリストが表示されます。その場(chǎng)合にのみ、選択を行うことができます。
両方のプラグインでオプションを検索できます。ボックス內(nèi)をクリックして、選択した最初の文字を入力するだけで、結(jié)果は検索に応じてリアルタイムで表示されます。
select2を使用すると、既に選択されているオプションを簡(jiǎn)単に解除できます。ドロップダウンが開(kāi)いている場(chǎng)合、選択した要素をクリックして選択を解除できます。 Chosenはまだこの機(jī)能を?qū)g裝していません選択したものとselect2の両方が、シングルおよびマルチセレクトボックスのプレースホルダーテキストをサポートします。
限られた數(shù)の選択
複數(shù)の選択ボックスで、ユーザーが選択するオプションの數(shù)を制限する必要がある場(chǎng)合があります。選択したものとselect2を使用する利點(diǎn)は、選択の數(shù)を非常に簡(jiǎn)単に変更できることです。
両方のプラグインを備えたマルチセレクトボックスから選択できる選択の數(shù)を制限できますが、選択したこの機(jī)能のバージョンがより高度になっていることは注目に値します。制限に達(dá)した後、追加のオプションを選択しようとすると、イベントが呼び出されます。 この例では、ユーザーは1週間で最も生産的な2日間を選択するように求められます。彼らが3日目を選択しようとすると、選ばれたイベントを呼び出します。私は、限界に達(dá)したことを示すアラートを追加するために選択しました：を參照してください。 レスポンシブデザイン
人々はあらゆる種類のデバイスであなたのページを見(jiàn)るので、あなたのウェブサイトの他のコンポーネントと同様に、選択したボックスを選択する必要があります。選択されたものとselect2の両方が、パーセンテージで設(shè)定幅をサポートしており、機(jī)能は両方でほぼ同じです。これにより、畫面サイズまたはブラウザウィンドウの幅を考慮したレスポンシブな選択ボックスを作成することができます。
選択されたselect2がこの機(jī)能について持つ唯一の違いはコードです。 HTMLのSelectタグ內(nèi)のSELECT2の幅を宣言できます。選択したボックスを選択して視覚的に優(yōu)れた選択とselect2で、選択したボックスをどのように便利にするかを理解するために、以下を參照してください。
<span>git clone https://github.com/harvesthq/chosen.git </span><span>git clone https://github.com/select2/select2.git </span>
bower <span>install jquery </span>bower <span>install select2 </span>bower <span>install chosen </span>
その他の同様の機(jī)能<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chosen/Select2 Template</title> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css"> </head> <body> <script></script> <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script> <script>// Additional logic goes here</script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Select2 Template</title> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css"> </head> <body> <script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> <script>// Additional logic goes here</script> </body> </html>chosen and select2には他の共通の機(jī)能がありますが、興味深いと感じた3つの機(jī)能を見(jiàn)てみたいと思います：無(wú)効な結(jié)果、隠された検索ボックス、左から左への（RTL）サポート。
無(wú)効な結(jié)果
これらの中で最も興味深いのは、無(wú)効な結(jié)果です。このオプションを設(shè)定すると、選択したオプションを強(qiáng)調(diào)表示します。障害のある選択肢を見(jiàn)ることができますが、選択することはできません。通常、無(wú)効な結(jié)果は、他の條件が満たされるまでユーザーがオプションを選択できないように設(shè)定されます。この機(jī)能は、選択ボックスを強(qiáng)力なツールに変え、ニーズに応じて使用する方法を?qū)Wぶと、ユーザーとのエンゲージメントが向上します。
プラグインに無(wú)効な結(jié)果がアクティブになっていることを知らせるために、屬性を無(wú)効にする= "disabled"をオプションタグに追加します。この選択した例では、ユーザーは地理的な場(chǎng)所で利用可能なオプションのみを選択できますが、利用できない場(chǎng)合でも他のオプションも表示できます。
検索ボックスを隠してください
シングル選択ボックスのオプションリストに多くの選択肢がない場(chǎng)合は、検索ボックスを非表示にすることをお?jiǎng)幛幛筏蓼?。選択した場(chǎng)合、検索ボックスを非表示にするには、disable_search_thresholdを使用し、選択ボックスのオプションの數(shù)よりも大きな値に設(shè)定する必要があります。<span>max_selected_options: 2 // Chosen Plugin </span>
select2について追加すべきことの1つは、選択ボックスにあるオプションの數(shù)を心配することなく、検索ボックスを永久に非表示にできることです。これを行うことができます
<span>git clone https://github.com/harvesthq/chosen.git </span><span>git clone https://github.com/select2/select2.git </span>
右から左（rtl）サポート
多數(shù)のWebサイトは、異なるアルファベットを持つ異なる言語(yǔ)で記述されており、それ以外に、これらの言語(yǔ)の一部は別の方向から読まれます。選択したボックスは、これらの言語(yǔ)のルールを使用して調(diào)整し、LTR（左から右）からRTLに方向をシフトすることをお?jiǎng)幛幛筏蓼?。これにより、ユーザーエクスペリエンスが向上し、その地域のユーザー向けのWebサイトの使いやすさが向上します。
選択したものとselect2の両方が、選択したボックスで左から左への手法をサポートしています。彼らが持っている唯一の違いは、select2がJavaScriptファイルでRTLサポートを宣言する必要があることです。その間、選択した場(chǎng)合、選択した選択クラスと一緒に選択した選択クラスをHTMLに追加するだけです。
select2は選択されたものに觸発され、選択された機(jī)能のほとんどを持っていますが、その貢獻(xiàn)者はそこで止まりませんでした。プログラマティックアクセス、テンプレート、無(wú)効モード、タグ付け、トークン化など、選択したボックスの最もクールな機(jī)能のいくつかを構(gòu)築しました。また、ajax。をサポートしています
プログラマティックアクセス
プログラマティックアクセスは、選択したボックスを別のレベルに引き上げます。複數(shù)の選択ボックスと組み合わせて非常に便利です。 JavaScriptを使用して、ルールに従ってこれらの選択ボックスに作用するボタンを追加できます。
複數(shù)の選択ボックスの一部のオプションが互いにリンクするロジックを持っている場(chǎng)合、あなたの観察によると、これらの「リンクされた」オプションは多くのユーザーから選択される可能性が高い場(chǎng)合、これらを選択すると便利です。シングルクリックでの選択。bower <span>install jquery </span>bower <span>install select2 </span>bower <span>install chosen </span>
この例では、「iOSテクノロジー」ボタンをクリックして、「Swift」と「Objective-C」をすばやく設(shè)定できます。Chosen/Select2 Template <script>// Additional logic goes here</script> タグ付け
タグ付けは、選択ボックスをより強(qiáng)力にし、通常の選択ボックスの制限を拡張するSelect2のもう1つの機(jī)能です。ユーザーは、まだオプションリストにない新しい選択肢を追加できます。タグ付けは、選択肢の範(fàn)囲が非常に大きく、オプションリストのすべての選択肢を入力することはできない場(chǎng)合にも非常に便利です。タグ付けが有効になり、ユーザーがリストに選択肢を見(jiàn)つけることができない場(chǎng)合、選択のタグを作成するために「プッシュ」します。
ただし、タグ付けを使用する場(chǎng)合は注意してください。選択ボックスの目的に対応しない無(wú)効なタグを入力する「悪意のある」ユーザーが誤用する可能性があるためです。
タグを有効にするには、タグオプションをtrueに設(shè)定する必要があります。CodepenのSitePoint（@SitePoint）によるタグ付けとタグ付けを參照してください。
トークン化
タグがtrueに設(shè)定されると、トークンセパレータを含めるオプションが利用可能になります。タグの名前を入力した後、指定されたトークンセパレーターの1つを入力してください。次に、タグはオプションリストに選択肢として入力されます。トークンセパレーターは、キーボードから文字を入力してタグを作成するためのショートカットとして機(jī)能します。
select2の助けを借りて、必要なキャラクターを備えたトークンセパレータを作成できます。次の例では、4つのトークンセパレータが使用されます。および ""（space）。
<span>git clone https://github.com/harvesthq/chosen.git </span><span>git clone https://github.com/select2/select2.git </span>
新しいオプションを入力して試してみて、セパレータ文字の1つを選択して選択してオプションリストに追加します。
AngularやReactなどのフレームワークで選択またはSelect2を使用できますか？または反応します。ただし、互換性を確保するには、追加のラッパーまたはライブラリを使用する必要がある場(chǎng)合があります。選択ボックスで選択した初期化の場(chǎng)合、検索ボックスが自動(dòng)的に追加されます。ユーザーはこのボックスに入力して、Selectボックスのオプションをフィルタリングできます。テンプレート
select2の最も強(qiáng)力な機(jī)能の1つはテンプレートです。テンプレートを使用すると、select2によって表示されるコンポーネントの外観をカスタマイズできます。この機(jī)能を使用して、オプションタグによって提供される最小入力を畫像または他のコンポーネントでマージして、ユーザーの視覚的なディスプレイを作成できます。この例は、Select2のテンプレートとBootstrapのグリフィコンを組み合わせています：
codepenのSitePoint（@SitePoint）によるPEN SELECT2テンプレートを參照してください。
結(jié)論
選択された選択肢はいくつかありますが、Select2は、選択したボックスで使用するための利用可能な機(jī)能の點(diǎn)でかなり多くを提供します。 Webサイトの「フロー」內(nèi)に組み合わせると、選択されたオプションですが、より高度な機(jī)能にアクセスしたい場(chǎng)合は、Select2がより良い選択です。select2の使用を強(qiáng)くお?jiǎng)幛幛筏蓼?。選択されたものよりも頻繁に更新され、バグが少なくなります。 Select2について非常に役立つと思ったことの1つは、そのドキュメントです。あなたがそれを読んでいる間、あなたはその場(chǎng)であなたのプロジェクトでselect2コンポーネントを使用することができます。
選択またはselect2を使用して良い経験や悪い経験がある場(chǎng)合は、以下のコメントセクションでお知らせください。jQueryについてよく尋ねる質(zhì)問(wèn)（FAQ）選択ボックスコンポーネント：選択vs select2
選択されたものとselect2の重要な違いは何ですか？
chosenとselect2はどちらも、選択ボックスの機(jī)能を強(qiáng)化するために使用される一般的なjQueryプラグインです。それらの間の重要な違いは、彼らの特徴と使いやすさにあります。 Select2はAjaxをサポートします。これにより、ユーザーのタイプとしてその場(chǎng)でロードすることにより、大きなデータセットを使用することができます。また、タグ付けと無(wú)限のスクロールもサポートしています。一方、選択された選択は、Ajaxやタグ付けをサポートしていませんが、ユーザーフレンドリーな検索機(jī)能とよりシンプルなインターフェイスを提供します。
select2を?qū)g裝するには、最初にプロジェクトにselect2 CSSおよびjavaScriptファイルを含める必要があります。次に、$（ "。mySeLectbox"）。select2（）を使用して、任意のボックスのselect2を初期化できます。指示。また、select2（）関數(shù)にオプションを渡すことでselect2の動(dòng)作をカスタマイズすることもできます。同じプロジェクトでは、通常はお?jiǎng)幛幛筏蓼护?。どちらのプラグインも、選択したボックスの機(jī)能を強(qiáng)化することを目指しており、それらを一緒に使用すると、競(jìng)合と予期しない動(dòng)作につながる可能性があります。ニーズに最適なものを選択することをお?jiǎng)幛幛筏蓼埂?select2 ajax>
以上がjQuery選択ボックスコンポーネント-Cosen vs select2の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開(kāi)発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Garbage CollectionはJavaScriptでどのように機(jī)能しますか？
Jul 04, 2025 am 12:42 AM
JavaScriptのごみ収集メカニズムは、タグクリアリングアルゴリズムを介してメモリを自動(dòng)的に管理して、メモリ漏れのリスクを減らします。エンジンはルートオブジェクトからアクティブオブジェクトを橫斷およびマークし、マークされていないオブジェクトはゴミとして扱われ、クリアされます。たとえば、オブジェクトが參照されなくなった場(chǎng)合（変數(shù)をnullに設(shè)定するなど）、次のリサイクルでリリースされます。メモリリークの一般的な原因には以下が含まれます。 closurures閉鎖の外部変數(shù)への參照。 globalグローバル変數(shù)は引き続き大量のデータを保持しています。 V8エンジンは、世代のリサイクル、増分マーキング、並列/同時(shí)リサイクルなどの戦略を通じてリサイクル効率を最適化し、メインスレッドのブロック時(shí)間を短縮します。開(kāi)発中、不必要なグローバル?yún)⒄栅虮埭?、パフォーマンスと安定性を改善するためにオブジェクトの関連付けを迅速に裝飾する必要があります。
node.jsでHTTPリクエストを作成する方法は？
Jul 13, 2025 am 02:18 AM
node.jsでHTTPリクエストを開(kāi)始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動(dòng)処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡(jiǎn)潔な構(gòu)文と強(qiáng)力な機(jī)能を備えており、非同期/待ち聲、自動(dòng)JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡(jiǎn)素化することをお?jiǎng)幛幛筏蓼埂?3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
JavaScriptデータ型：プリミティブ対參照
Jul 13, 2025 am 02:43 AM
JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問(wèn)題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。
JavaScript Timeオブジェクト、誰(shuí)かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
Jul 08, 2025 pm 02:27 PM
こんにちは、JavaScript開(kāi)発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭(zhēng)、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強(qiáng)力な開(kāi)発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭(zhēng)は、論爭(zhēng)を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請(qǐng)願(yuàn)書を提出しました。
React vs Angular vs Vue：どのJSフレームワークが最適ですか？
Jul 05, 2025 am 02:24 AM
どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無(wú)料で、高いカスタマイズとチームアーキテクチャ機(jī)能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長(zhǎng)期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。
JavaScriptですぐに呼び出された関數(shù)式（IIFE）を理解します
Jul 04, 2025 am 02:42 AM
iife（即時(shí)インドボークフニックエクスペッション）は、定義の直後に実行される関數(shù)式であり、変數(shù)を分離し、グローバルな範(fàn)囲の汚染を避けるために使用されます。括弧內(nèi)に関數(shù)を包むことによって呼び出され、式と括弧のペアがすぐにそれに続く、（function（）{/code/}）（）;そのコアの使用には、次のものが含まれます。1。さまざまな競(jìng)合を回避し、複數(shù)のスクリプト間の命名の重複を防ぎます。 2。プライベートスコープを作成して、內(nèi)部変數(shù)を見(jiàn)えないようにします。 3。変數(shù)が多すぎずに初期化を容易にするモジュラーコード。一般的なライティング方法には、ES6矢印関數(shù)のパラメーターとバージョンで渡されたバージョンが含まれますが、式とタイを使用する必要があることに注意してください。
ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
Jul 08, 2025 am 02:40 AM
約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
Jul 08, 2025 am 02:43 AM
Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開(kāi)発者は、スクリプト、スタイルシート、寫真などのリソースを手動(dòng)で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場(chǎng)合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
