在 JavaScript 中更改下拉菜單的顏色

Question

不幸的是，我找不到任何給定的解決方案來解決我的問題。

我需要在給定的下拉菜單中更改特定選項的顏色。

編輯：這是 HTML：

<label> Select Lec:</label>
   <select id="lect">
      <option value="0"> Select</option>
   </select>

這是我調用函數changeColor的地方：

$("#algorithmResult").append("<p class='added_value'>Recommended: " + algorithm_result[course].Lec_name + "</p>");
changeColor(algorithm_result[course].Lec_name);

這是以下代碼：

$("#lect").append("<option id='" + res[i].Lec_name+"'  >" + res[i].Lec_name + "</option>");

現在我觸發了以下功能：

function changeColor(value) {                   
            document.getElementById(value).style.color = "green";

        }

現在，我已經調試過了， res[i].Lec_name 和 value 是同一個字符串。 由於某種原因它不起作用，有人可以幫忙嗎？

Answer 1

如果我理解正確，您正在嘗試突出顯示選項，所以我為它創建了一個簡單的函數，您必須在第一個參數中給出選擇元素，然后在索引數組上分配選定的類，然后在 css 中為該類添加樣式

 function changeColor(select,indexes){ Array.from(select.children).forEach((each,i)=>{ if(indexes.indexOf(i) === -1){ each.classList.remove("selected") } else {each.classList.add("selected")} }) } //example use const select = document.querySelector("select") changeColor(select,[0,3,5,8]) // [main select element , indexes to highlight]

 .selected { background:blue; color:white; }

 <select name="" id=""> <option value="select1">select1</option> <option value="select1">select1</option> <option value="select1">select1</option> <option value="select1">select1</option> <option value="select1">select1</option> <option value="select1">select1</option> <option value="select1">select1</option> <option value="select1">select1</option> <option value="select1">select1</option> </select>