javascript - 选择文字颜色

Question

我正在尝试制作一个下拉菜单，让您可以选择颜色名称，它们应该以该颜色显示。所以红色应该是红色，蓝色应该是蓝色，等等。我希望它们在您查看列表、鼠标悬停和被选中时保持不变。到目前为止，我已经让它们正确显示在列表中，并且在悬停时显示正确，但在选中时显示不正确。

$(document).ready(function() {	
  $(".pickerSelectClass").selectpicker();	

  $("#select").selectpicker("refresh");
  $('.filter-option').css("color","green");
});

.selectContainer {width:200px}

<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="1" style="color:red">Red</option>
    <option value="2" style="color:blue">Blue</option>
  </select>
</div>

您可以在 JSFiddle 上明白我的意思。 .谁能帮忙？

Answer 1

将 $('.filter-option').css("color","green"); 替换为 $('.filter-option').css("color ",$('#select').val());

如果您不介意更改值以匹配颜色，则可以这样做:

  $('#select').on('change', function(){
    $('.filter-option').css('color', $(this).val());
  });

如:

<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="red" style="color:red">Red</option>
    <option value="blue" style="color:blue">Blue</option>
  </select>
</div>