Javascript 为 Select 选项中的选定项目设置背景颜色（多个）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5640355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set Background color for a selected item in a Select option (multiple)
提问by Carolina
I'm trying to change the background color of the selected items in a listbox (select multiple options).
我正在尝试更改列表框中所选项目的背景颜色（选择多个选项）。
I tried with css... I tried with JavaScript... and with jquery... I really don't know what happen!! But I'm unable to find the answer :_(.
我用 css 试过……我用 JavaScript 试过……还有 jquery……我真的不知道会发生什么！！但我找不到答案:_(。
I read at least 10 questions in this forum.. and I tried all the proposed solutions but I only can change the background of the complete list... not the selected items. The only way I found is to use an unordered list with clickable list items instead if my select - option ... but I'm working with a form, and I want to send to the server the selected items in the traditional way.
我在这个论坛上阅读了至少 10 个问题......我尝试了所有建议的解决方案，但我只能更改完整列表的背景......而不是所选项目。我发现的唯一方法是使用带有可点击列表项的无序列表，如果我选择 - 选项......但我正在使用表单，并且我想以传统方式将所选项目发送到服务器。
回答by Hussein
This will change the background color of the selected option
这将更改所选选项的背景颜色
$('select').change(function() {
$('option').css('background', 'none');
$('option:selected').css('backgroundColor', 'red');
}).change();
Check working example at http://jsfiddle.net/TxbVt/1/
在http://jsfiddle.net/TxbVt/1/检查工作示例
回答by Oliver Moran
Doesn't look like it wants to play ball:
看起来不像是想打球：
<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>
This doesn't suprise me. In my experience widgets are generally resistant to such styling. Rolling your own, like in Hussein's approach, looks like your only way out.
这并不让我感到惊讶。根据我的经验，小部件通常对这种样式有抵抗力。滚动你自己的，就像侯赛因的方法一样，看起来是你唯一的出路。
回答by alex
JavaScript
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'), '');
}
}
};
CSS
CSS
#your-select option.selected {
background: red;
}
