Anonim

HTMLでのドロップダウン選択は、最もネイティブに使いにくいアイテムの一部です。 それらをスタイリングするのは苦痛であり、基本的な機能では、ニーズの限られた量のアイテムを持っている場合を除き、あまり有用ではありません。

そこで、Chosenが登場します。これは、ドロップダウンエクスペリエンスをより見栄えの良いものにするだけでなく、機能の観点からもより優れたJavaScriptライブラリです。

上記のデフォルトの選択機能を確認できます。 見た目は素晴らしく、デフォルトでは、ドロップダウンに大量のアイテムがある場合に結果をフィルタリングする単純な検索メカニズムがあります。 最初に、javascriptファイルとcssファイルを含めます。 次に、以下のコードでそれらを初期化します。

それと同じくらい簡単です。 それでは、ドロップダウンの機能を変更して複数の選択を可能にしたい場合、次のレベルに進みましょう。 以下の「赤」を検索してからEnterキーを押し、「青」を検索してEnterキーを押します。 Xまたはバックスペースを2回押すだけで、選択から簡単に削除できます。


あなたがしなければならないのは、以下のようにselectの呼び出しでオプションを複数渡すことです。 JavaScriptに変更はなく、まったく同じ方法で初期化されます。