选择选项中的颜色选择器答案

【问题标题】：Colorpicker in select option选择选项中的颜色选择器
【发布时间】：2021-04-19 20:13:43
【问题描述】：

我有一个颜色选择选项。

<select class="form-control">
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

但我想让它们颜色而不是文字。这可能吗？

我找到了引导颜色选择器。但我不希望你选择其他颜色。

【问题讨论】：

标签： jquery css html twitter-bootstrap

【解决方案1】：

使用值或文本作为选项的背景。
请注意，悬停的选项会变成蓝色，因为这是该选项的默认功能

$(".form-control option").each(function() {


  $(this).css("background-color", $(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
 <option ></option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

【讨论】：

【解决方案2】：

<select class="form-control">
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

【讨论】：

【解决方案3】：

你可以改变选项标签的背景颜色

看看这个

https://stackoverflow.com/a/12836286/8318573

【讨论】：

【解决方案4】：

试试<input type="color">:

&lt;input type="color"&gt;

如果您希望用户只选择预先确定的一组颜色 - 您可以为您的选项设置背景颜色：

$('.colors option').each(function() {
  $(this).css('background-color', $(this).val());
});

$('.colors').on('change', function() {
  $(this).css('background-color', $(this).val());
});

.colors {
  width: 150px;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="colors">
    <option value="yellow"></option>
    <option value="red"></option>
    <option value="green"></option>
    <option value="blue"></option>
</select>

【讨论】：

我可以选择其他颜色，我不想这样做。

【解决方案5】：

这就是你想做的，

$("#form-control").change(function(){
    var color = $("option:selected", this).attr("class");
    $("#form-control").attr("class", color);
});

.yellow {
    background-color: yellow;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="form-control" class="">
    <option class="yellow">Yellow</option>
    <option class="red">Red</option>
    <option class="green">Green</option>
    <option class="blue">Blue</option>
</select>

没有文字，

$("#form-control").change(function() {
  var color = $("option:selected", this).attr("class");
  $("#form-control").attr("class", color);
});

   .yellow {
     background-color: yellow;
     width: 100px;
   }
   
   .red {
     background-color: red;
     width: 100px;
   }
   
   .green {
     background-color: green;
     width: 100px;
   }
   
   .blue {
     background-color: blue;
     width: 100px;
   }
   
   .colors {
     width: 100px;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="form-control" class="colors">
  <option class="yellow"></option>
  <option class="red"></option>
  <option class="green"></option>
  <option class="blue"></option>
</select>

【讨论】：