javascript - 选择时更改下拉菜单的背景颜色

标签 javascript css html

如何改变下拉菜单的颜色。就像我有一个包含 5 个选项的下拉菜单,每当我单击一个选项时,我希望该选项更改颜色,以便我可以跟踪我已经选择了哪些选项。 (这里的 5 是假设的,我有更大的列表,其中包含 IP 和端口作为字段,所以不记得我检查过的所有字段)。

假设我的下拉菜单是

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
    <option val="5">Option 5</option>
</select>

最佳答案

var select = document.getElementById('select');
select.onchange = function() {
  select.options[select.selectedIndex].style.backgroundColor = 'red';
}

var clean = document.getElementById('clean');
clean.onclick = function() {
    for(var i = 0; i < select.options.length; i++) {
      select.options[i].style.backgroundColor = '';  
    }
}
<select id="select">
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
    <option val="5">Option 5</option>
</select>

<button type="button" id="clean">Clean</div>

关于javascript - 选择时更改下拉菜单的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26292776/

相关文章:

javascript - Chrome 扩展丰富的通知不起作用

javascript - 找出 JS 和 PHP 中时间戳的差异

javascript - react-rte 给出 TypeError : r. getEditorState is not a function in next js

javascript - 防止默认滚动到输入元素

html - 是否可以使用 ID 标签更改 css 内容

html - 用 anchor 填充 td 高度

javascript - ExtJS:当另一个调用存在时,击键的 ajax 调用不起作用

css - 在css3中的文本后面插入文本

javascript - jquery菜单栏淡入淡出错误

javascript - 如何隐藏/禁用 videojs 中的按钮控件?