画像オプションのリストから選択するにはどうすればよいですか?

Question

選択入力で選択する画像のリストが表示されるデザインを実装しようとしています。

<select name="choose-image">
    <option value="" 無効選択済み>画像を選択してください</option>
    <option value="笑顔"><img src={image} alt="ローカルアバター" /></option>
    <option value="悲しい">悲しい</option>
</select>

2 番目のオプションでは何も表示されません。表示されたとしても、ドロップダウンのスタイルを設定する必要がありますが、その方法がまだわかりません。助けていただきありがとうございます。ありがとう。

Answer 1

要素タグ内での画像の直接使用は、HTML ではサポートされていません。 2 番目のオプションが何も表示しない理由は、

タグが HTML 要素ではなくプレーン テキストであることを意図しているためです。選択用の画像のリストを表示するデザインを実装するには、HTML、CSS、および JavaScript を使用してカスタム選択ドロップダウン メニューを使用できます。これを実現するのに役立つライブラリとプラグインがいくつかあります。たとえば、Select2、Chosen、CSS と JavaScript を使用したカスタム実装などです。画像を使用してカスタム選択ドロップダウン メニューを作成する方法の例を次に示します。

HTML

リーリー

CSS:

リーリー

JavaScript :

リーリー

この例では、{image_url} を、表示する画像の実際の URL に置き換えることができます。ユーザーがカスタム選択をクリックすると画像のリストが表示され、ユーザーが画像を選択すると、それに応じて選択したオプションが更新されます。これは基本的な例であり、特定のニーズやスタイル設定に基づいて CSS と JavaScript を調整する必要がある場合があることに注意してください。さらに、より複雑なアプリケーションの場合は、React や Vue.js などのフロントエンド フレームワークの使用を検討してください。