カスタム選択ドロップダウンコンポーネントの作成は、Web開発で最も一般的な要件の1つです。 [選択]ドロップダウンを使用すると、ユーザーは事前定義されたリストから1つの値を選択できます。疑問に思われるかもしれません：

「HTML選択タグがすでにあるのに、なぜカスタム選択ドロップダウンコンポーネントを作成する必要があるのですか？cssスタイルを適用できます。それだけです！」

残念ながら、selectドロップダウンのスタイル設定はそれほど単純ではありません。ネイティブHTMLのselect要素では、オプションタグのスタイル設定はできません。

現在、selectドロップダウンはさまざまなバリエーションで表示されます。さまざまなjavascriptライブラリとcssフレームワークを見つけることができます。 、カスタム選択ドロップダウンの独自の実装があります。クロスブラウザ機能が証明されており、信頼性が高くなっています。多くの場合、カスタム選択ドロップダウンの作成は簡単であるため、ライブラリやフレームワークを使用する必要はありません。タスク。

このブログ投稿では、ライブラリやフレームワークを使用せずに機能的な選択ドロップダウンを作成する方法を紹介します。スタイルを適用してオプションを選択し、そこにカスタムコンポーネントを追加できます。

カスタム選択ドロップダウンの作成を開始する前に、次の質問：

選択ドロップダウンには数百または数千のオプションがありますか？

ユーザーは複数のオプションを選択できますか？

どちらの場合も、を使用する必要があります独自の実装には多くの時間がかかる可能性があるため、サードパーティのライブラリ。何百ものオプションを含むドロップダウンが必要な場合は、ユーザーに検索機能を提供する必要があります。ドロップダウンに数千のオプションがある場合は、「ウィンドウ処理」手法を使用する必要があります。詳細については、[高度な選択]ドロップダウンを確認してください。

カスタム選択ドロップダウンの例

ここに、デフォルトの選択要素があります。使用しているブラウザによって、外観が少し異なる場合があります。

このチュートリアルでは、デフォルトのselect要素を次のように変換します。

HTML

従来、カスタム選択ドロップダウンを作成する必要がある場合は、次の構造を使用します。

selectタグを使用できないため、html構造を選択するためのオプションが増えました。 。ul要素とli要素、またはdivを要素。divとspan構造を選択しましょう。

CSS

次のことを行うことをお勧めしますcssリセットから始めます。これにより、ブラウザーの不整合が減少します。 Eric Meyerのcssリセットを選択しました：

出典：https://meyerweb.com/eric/tools/css/reset/

box-modelを使用します。ここでwidth =要素の幅+パディング+境界線。

最初に、html要素の基本的なスタイルをいくつか追加しました。 <div class=”custom-select”>位置は相対的です。これは、ドロップダウンリストに絶対位置を適用する必要があるためです。

次のcssはドロップダウン矢印に使用されます。

CSS3プロパティの遷移と変換を確認できます。トランジションは、ドロップダウンリストのフェードインとフェードアウトに使用されます。変換は、ドロップダウン状態を表す方向である矢印のアニメーション化に使用されます。

JavaScript

DOM操作にサードパーティのライブラリを使用する必要はありません。単純なドロップダウンの場合、必要なのは基本的なjavascriptイベントのみです。

ラッパーにクリック関数を追加しました。クリック機能は、オプションリストが開いているか閉じているかを表すクラス.openを切り替えます。クリック関数内で、this.querySelector(".custom-select")で<div class=”custom-select”>を検索しています。クリック関数内のThisは、クリックされた要素を表します。 DOM内にさらにドロップダウンがある場合に備えて、document.querySelector(".custom-select")でドキュメント全体をクエリしていません。

上記のJavaScriptスニペットでは、すべてのオプションを繰り返し処理し、クリックを追加しています。 .selectedクラスを追加して選択したオプションを変更する関数。繰り返しますが、クリック関数内では、1つのページで複数のドロップダウンをサポートするようにイベントハンドラーを変更する場合に備えて、クリックされたオプション（スニペットのthis）内でクエリを実行しています。

最後のスニペットはオプションであり、ユーザーがドロップダウンからクリックした場合にドロップダウンリストを閉じることができます。

1ページに複数の選択ドロップダウンを使用

1ページに複数の選択ドロップダウンを使用する場合ページでは、クリックリスナーをすべての.custom-select-wrapper要素にアタッチし、ユーザーがドロップダウンからクリックした場合はすべてのドロップダウンを閉じる必要があります。

高度な選択ドロップダウン

数百のオプションまたは複数の選択を含む選択ドロップダウンが必要な場合は、使用可能なライブラリのいくつかを確認できます。この記事では、最も人気のあるライブラリの比較をいくつか見ることができます。

数千のオプションを処理する必要がある場合、数千のオプション要素を使用してDOMをレンダリングすることはできません。バックエンドを使用できない場合は、「ウィンドウ処理」手法を使用する必要があります。

「ウィンドウ処理」手法とは何ですか？

リストから数千の要素をレンダリングするのではなく、かつて、「ウィンドウ処理」または仮想化は、ユーザーに表示されるアイテムのみのレンダリングに重点を置いています。このBrian David Vaughnが、実装が簡単でパフォーマンスを大幅に向上させる「ウィンドウ処理」手法の実装について説明していることを確認できます。

結論

このブログ投稿が、カスタム選択ドロップダウンコンポーネントの構築方法に役立つことを願っています。最初に、選択ドロップダウンに多くのオプションが含まれているかどうか、またはユーザーが複数のオプションを選択できるかどうかを知る必要があります。基本的なselectコンポーネントが必要な場合は、ブログ投稿でHTML、CSS、JavaScriptの実装全体について説明しています。ソースコードはGithubで確認できます。