选择

Question

＆＃13;

＆＃13;

<select>
    <option value="apple" style="background: red">Apple</option>
    <option value="banana" style="background: yellow">Banana</option>
    <option value="pear" style="background: green">Pear</option>
</select>

＆＃13;

＆＃13;

＆＃13;

所以我有一个HTML下拉列表，其中包含具有背景颜色的选项。但是，一旦我从列表中选择了其中一个选项，背景颜色就会消失......

有没有办法让它如此选择一个选项，背景颜色仍然存在？

Answer 1

我创建了一个JSFiddle

以下是代码：

＆＃13;

＆＃13;

tt#######

＆＃13;

.Red {
  background-color: #ff0000;
}

.Green {
  background-color: #00ff00;
}

.Blue {
  background-color: #0000ff;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

<select name="select" class="Red" onchange="this.className = this.options[this.selectedIndex].className">
     <option class="Red" value="1">Red</option>
     <option class="Green" value="2">Green</option>
     <option class="Blue" value="3">Blue</option>
</select>

所选项目是DOM中的整个其他对象，其他样式应用于它。 您可以使用JavaScript或JQuery获取所选选项的颜色，然后将其应用于所选项目。