Question

我正在尝试更改列表框中所选项目的背景颜色（选择多个选项）。

我尝试用css ...我尝试使用JavaScript ...并使用jquery ...我真的不知道发生了什么！但是我找不到答案：_（。

我在这个论坛上至少阅读了10个问题..我尝试了所有提出的解决方案，但我只能更改完整列表的背景...而不是所选项目。我发现的唯一方法是使用带有可点击列表项的无序列表，如果我的选择 - 选项......但我正在使用表单，我想以传统方式向服务器发送所选项目。

Answer 1

这将更改所选选项的背景颜色

$('select').change(function() {
    $('option').css('background', 'none');
    $('option:selected').css('backgroundColor', 'red');
}).change();

检查http://jsfiddle.net/TxbVt/1/

处的工作示例

Answer 2

看起来不想打球：

<style>

::selection {
   background: #FF0000; /* Safari */
   }
::-moz-selection {
   background: #FF0000; /* Firefox */
}
</style>

<select multiple="true">
<option><span style="background:FF0000;">One</span></option>
<option>Two</option>
<option>Three</option>
</select>

<p>This is text.</p>

这并不让我感到惊讶。根据我的经验，小部件通常对这种造型有抵抗力。像侯赛因一样，滚动你自己，看起来是你唯一的出路。

Answer 3

的JavaScript

document.getElementById('your-select').onchange = function() {

    var options = this.getElementsByTagName('option'),
        selectedClassName = 'selected';

    for (var i = 0, length = options.length; i < length; i++) {
        var option = options[i],
            className = option.className;

        if (i == this.selectedIndex) {
            option.className += selectedClassName;
        } else {
            option.className = (' ' + className + ' ').replace(new RegExp('\\s' + selectedClassName + '\\s'), '');
        }
    }
};

jsFiddle

CSS

#your-select option.selected {
    background: red;   
}

在“选择”选项中设置所选项目的背景颜色（多个）

3 个答案:

检查http://jsfiddle.net/TxbVt/1/

的JavaScript

CSS