javascript - 各選択ボックス オプションの色フィールドとテキスト値

Question

選択ボックスにオプション値を動的に追加しました。しかし、各オプションについて、カラーバーに関する小さなカラーバーと説明を表示したいと思います。説明はカラーバーに当てはまります。

セレクトボックスの各オプション値にカラーバー+説明を動的に組み込む方法は？

次のコードは、オプション値を追加しています。

  for (var i = 0; i < item.length; i++) { 
   Options += '<option value="' + item[i] + '">' + item[i] + '</option>';
   }

私の要件は、 item value の横に幅 1em の小さなテキスト フィールドを使用してカラー バーを追加することです。

Answer 1

このバーがテキストの背景にある場合は、オプションタグ内で適切なスタイルを使用し、数式を使用してiを使用し、RGBコードを使用して色を計算できます。

<option style="background-color: rgb(255,255,i);"> item i </option>

0から255までの値を生成し、それらの間に十分な差があるiを使用して計算を見つけてみてください。式は、iの範囲によって異なります。もちろん、オプション間に十分なコントラストを生成するには、255〜ix10のようになります。