Question

我有一个选择列表，其中包含颜色选项（绿色选项，红色选项等等）。当我点击我的选择列表时，我看到我的选项是我定义的颜色，但当我选择该值时，我希望所选值具有自己的颜色，默认情况下不是白色或更改选项时是蓝色。以下是我的代码段。

＆＃13;

<select id="myBox">
  <option style="color:red">
    red
  </option>
  <option style="color:blue">
    blue
  </option>
  <option style="color:green">
    green
  </option>
</select>

＆＃13;

是否可以自定义＆＃34;默认＆＃34; （蓝色和白色）颜色以及如何？

Answer 1

您可以在选择中使用change事件功能，然后将其样式属性设置为所选选项的样式。

<script>
$().ready(function(){
    $("#myBox").on("change",function()
    {
      var style = $(this).find("option:selected").attr("style");  
      $(this).attr("style",style);  
    });
});

http://jsfiddle.net/woj7mers/3/

Answer 2

@KuKeC您可以使用jquery：

 $(document).ready(function(){

        $('#myBox').change(function(){
            var selectedColor = $('#myBox option:selected').text()
          console.log(selectedColor)
          $('#myBox ').css({'background': selectedColor, 'color' : '#FFFFFF' })
      })
    })

我希望这就是你要找的东西。注意：我在您的选择框中添加了一个ID。

以下是您和最终关注用户的示例：

https://jsfiddle.net/8ge7eomr/

如果这对你很有帮助，如果你愿意投票，我会赞成你。

如果您需要更多更改，请告诉我。

Answer 3

这是一种没有jQuery的方法。将函数传递给select的onchange属性，并为每个元素添加color属性。然后在传递给onchange的函数中，获取所选项目，获取color属性，然后更改所选项outline的{{1}}和color属性

style

function selectChanged() {
  var select = document.getElementById("myBox");
  var item = select.options[select.selectedIndex];
  var color = item.getAttribute("color");
  if (color === 'none') {
    select.style.color = "black";
    select.style.outline = "none";
  } else {
    select.style.outline = "solid " + color + " 1px";
    select.style.color = color;
  }
}

选择的颜色为

3 个答案: