Question

我有一个带有不同颜色文本的html下拉列表

<select class="form-control">
  <option value="">-- Select --</option>
  <option style="color: Black" value="Black">Black</option>
  <option style="color: Blue" value="Blue">Blue</option>
  <option style="color: Red" value="Red">Red</option>
  <option style="color: Orange" value="Orange">Orange</option>
  <option style="color: Brown" value="Brown">Brown</option>
  <option style="color: Green" value="Green">Green</option>
  <option style="color: Purple" value="Purple">Purple</option>
  <option style="color: Cyan" value="Cyan">Cyan</option>
  <option style="color: Magenta" value="Magenta">Magenta</option>
</select>

现在您可以显示不同颜色的所有选项但是当我选择任何选项时，颜色颜色没有颜色..它的默认文本颜色。

我想保持相同的颜色

JSFiddle：https://jsfiddle.net/mahajan344/ztxws0n7/

Answer 1

这是因为您的HTML仅表示为option元素设置样式，而不是整体select。有些浏览器可能会自动为您解释这一点，但如果没有它，您就无法通过样式化来实现这一点。

可以通过一些简单的javascript来克服它，它会在选择更改时应用所选选项的样式属性。

下面的例子使用jQuery：

$(function(){

$("select").change(function(){
    var $selectedOption = $(this).find("option:selected");
    $(this).removeAttr("style").attr("style", $selectedOption.attr("style"));
});

});

https://jsfiddle.net/ztxws0n7/2/

Answer 2

尝试一旦你可以找到所选的选项样式并删除脚本中的先前样式，那么它可以正常工作

＆＃13;

$(function(){

$("#selectbox").change(function(){
    var $yourchoice = $('#selectbox').find("option:selected");
    $(this).removeAttr("style").attr("style", $yourchoice.attr("style"));
});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="selectbox">
  <option value="">-- Select --</option>
  <option style="color: Black" value="Black">Black</option>
  <option style="color: Blue" value="Blue">Blue</option>
  <option style="color: Red" value="Red">Red</option>
  <option style="color: Orange" value="Orange">Orange</option>
  <option style="color: Brown" value="Brown">Brown</option>
  <option style="color: Green" value="Green">Green</option>
  <option style="color: Purple" value="Purple">Purple</option>
  <option style="color: Cyan" value="Cyan">Cyan</option>
  <option style="color: Magenta" value="Magenta">Magenta</option>
</select>

＆＃13;

html下拉文本颜色在选择时更改

2 个答案: