在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";
}

现在，我已经调试并恢复了[I]。Lec_name和value是同一个字符串。由于某些原因，它不能工作，有人可以帮助吗?

Answer 1

如果我没理解错的话你是想突出显示选项所以我为它创建了一个简单的函数你必须在第一个参数中输入select元素然后是索引数组来为它分配所选的类然后在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>