Javascript 仅将样式应用于选定选项

我正在制作一个网站，你可以向你展示你可以用选择键编辑的句子。 我希望该选项在定义时保留样式。或者能够检测

class=“something”

来选择样式

实际上，我所做的是能够检测class=“something”是否被单击，并将样式应用于每个选择，而不仅仅是带有所选单词的选择

简单地说，我想对选择“something”类的单词应用一个不同的方法（不仅仅是在下拉菜单中）

下面是一些有人帮助的事情：

$('select').on('change', function () {
let phrase = $('.un').get().reduce((a, b) => a + ' ' + b.value, '').substring(1).trim();
console.log(phrase);
var selectedOption = $(this).find('option:selected');
var optionClass = selectedOption.attr('class');//here you can get option class
if(optionClass === "something"){
  //do stuff here
}
if (phrase.includes('il est bleu')) {
    $(".white").css('background-color', 'blue');
} else {
    $(".white").css('background-color', 'white');
}
});

但这将对我的所有选择应用一种样式，而不仅仅是选择了

选项class=“something”

的选择

$（文档）.ready（函数（）{
});
让短语=[“我不知道。”
];
设lettres=/[\u0041-\u005a\u0061-\u007a\u00aa-\u00b5\u00ba-\u00c0\u00c1-\u00d6\u00d8-\u00f6]/gui；
标记化=函数（短语）{
让mots=['']；
让它=短语[Symbol.iterator]（）；
for（var c=it.next（）；！c.done；）{
对于（；！c.done&&c.value.match（lettres）；c=it.next（））{
电动机[电动机长度-1]+=（c值）；
}
//console.log（c.value）；
if（mots[mots.length-1]。长度！=0）{
mots.push（“”）；
}
如果（c.值=“”）{
对于（c=it.next（）；！c.done&&c.value==“”；c=it.next（））{continue；}continue；
} 
//控制台日志（i）；
控制台日志（mots）；
如果（！c.value.match（lettres））{
电动机[电动机长度-1]+=（c值）；
//console.log（c.value）；
mots.push（“”）；
}
c=it.next（）；
}
返回运动切片（0，运动长度-1）；
}
$（文档）.ready（函数（）{
让LARGEUR=$（“#container.repeat”）.clone（）；
让变化=函数（）{
$（“.width\u tmp\u option”，this.parent）.html（$（'option:selected'，this.val（））；
$（this.width（$（“.width\u tmp\u select”，this.parent.width（））；
}
$（'#container'）。on（“change”，“.un”，change）；
设idx=Math.floor（Math.random（）*Math.floor（phrases.length））；
让mots=tokenize（短语[idx]）；
对于（变量i=0；ia+''+b.value'，）.substring（1.trim（）；
console.log（短语）；
如果（短语包括（'il est bleu'））{
$（“.white”）.css（'background-color'，'blue'）；
}否则{
$（“.white”）.css（'background-color'，'white'）；
}
});
});
什么{
颜色：红色；
字体系列：草书；
}
身体{
宽度：70vw；
高度：100vh；
溢流：正常；
溢出：隐藏；
}
.联合国{
宽度：2em；
保证金：0.2rem；
字体系列：无衬线；
字体大小：2.5rem；
} 
.un*{
边界半径：15px；
字体大小：2.5rem；
}
选择权{
背景色：无；
}
选项：悬停{
背景颜色：绿色；
}
：：选择{
背景颜色：绿色；
}
.宽度\u tmp\u选择{
背景色：无；
}
.宽度\u tmp\u选择{
显示：无；
字体大小：2.5rem；
字体系列：“Rungli Italic”；
} 
#p1{
字号：2rem；
边界：无；
} 
/*对于IE10*/
选择：：-ms展开{
显示：无；
}
.重复{
显示：内联块；
}
continuer先生{
不透明度：0.2；
位置：绝对位置；
底部：0.5vw；
右：0.5vw；
字体大小：2.5rem；
填料：0.1vw；
}
.continuer:悬停{
不透明度：1；
背景色：白色；
}

白细胞介素
est//我希望这首歌有另一种风格，可以取代这句话的其他部分。
布鲁
N
'
pas
.

请试试这个

我将背景色更改为背景色

$(".white").css('background', 'blue');

$(".white").css('background', 'white');

css

将它们分开，因为ie11不理解：关注内部，并打破所有的关注样式

---

首先，您必须找到

某物的父元素
.select:focus
{
  // your special styling
}

.select:focus-within
{
  // your special styling
}

var selectedOption = $(this).find('option:selected');
var optionClass = selectedOption.attr('class');//here you can get option class
if(optionClass === "something"){
    selectedOption.parent().css('color', 'red');
} else {
    selectedOption.parent().css('color', '');
}

option:not(.something) {
    color:black;
}

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

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background:red;
}

select option[value="2"] {
  background:#00CC99;
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

.greenColor{
    background-color: #33CC33;
}
.redColor{
    background-color: #E60000;
}