각 선택 상자 옵션의 색상 필드와 텍스트 값

Question

나는 선택 상자에 옵션 값을 동적으로 추가했습니다. 그러나 각 옵션에 대해 컬러 바에 대한 작은 색상 막대 + 설명을 표시하려고합니다. 색상 바에 대한 설명이 옳다.

selectbox의 각 옵션 값에 색상 막대 + 설명을 동적으로 통합하는 방법은 무엇입니까?

다음 코드는 옵션 값을 추가합니다.

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

내 요구 사항은 항목 값 옆에 1em 크기의 작은 텍스트 필드를 사용하여 색상 막대를 추가하는 것입니다.

Answer 1

이 막대는 찾을 RGB 코드를

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

시도를 사용하여 색상을 계산하는 옵션 태그 내부의 타당성 스타일을 사용하고 i를 사용하는 몇 가지 수학 공식을 사용할 수있는 텍스트의 배경에있는 경우 0과 255 사이의 좋은 차이로 0에서 255 사이의 값을 만드는 일부 계산은 공식의 범위에 따라 달라집니다. 255 - ix 10과 같을 수 있으므로 옵션 사이에 충분한 대비가 생깁니다.