Javascript选项部分斜体

Question

我想制作HTML Option Italic的第一个单词，但只有下拉菜单中的文字发生变化，所选项目仍为普通字体。

 <select name="selectGene" id="selectGene">
<option value="gene"> Homo sapiens BCL3 </option> 
</select>    
<script>
    var opt = document.getElementById("selectGene").options[0];
    var str = "Homo sapiens"
    opt.innerHTML = str.italics() + " BCL3";
</script>

Answer 1

您无法对该选项进行部分样式设置，这些样式是所使用平台的原生样式。

以下链接是jquery插件，它使用div和list元素来模拟选择选项，您将能够应用您的样式。

https://plugins.jquery.com/selectric/

Answer 2

可能会对你有用。

<select name="selectGene" id="selectGene">
<option value="gene"> Homo sapiens BCL3 </option> 
<option value="gene"> Homo sapiens BCL31 </option> 
<option value="gene"> Homo sapiens BCL32 </option> 
<option value="gene"> Homo sapiens BCL33 </option> 
</select> 

<script>
for(var i=0; i<document.getElementById("selectGene").options.length;i++){ 
    var opt = document.getElementById("selectGene").options[i];
    opt.style.fontStyle= "italic";
}
</script>