javascript - 我如何使用 Jquery 代码突出显示选择选项 html 元素中的单词

Question

有人可以帮我解决这个问题吗:我想用 jquery 在选择选项 html 元素中突出显示一个单词。例如:

 <select>
  <option value="volvo">Volvo</option>
  <option value="saab">not Saab</option>
  <option value="vw">VW</option>
  <option value="audi">but Audi</option>
</select> 

“不”这个词应该是红色的，“但是”这个词应该是绿色的(使用 CSS)。我发现以下 website使用类似问题的代码，但我可以修改 jquery 代码，使其与选项选择元素一起使用。有人为我们解决了这个问题吗？谢谢

Answer 1

这是不可能的，因为你需要一个额外的元素来包裹“not”这个词，但是 option 元素只能有 text 内容。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

似乎至少在 Chrome 和 Firefox 中你甚至不能在 option 标签中使用伪元素:

[value=saab]::before { content: "not "; }

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">but Audi</option>
</select> 

就目前而言，jQuery 也无法帮助您，因为 jQuery 无法完成 DOM 无法完成的工作。