如何获取带有颜色列表的下拉菜单？

Question

<select name="color" class="form-control" id="color">
  <option value="">Choose</option>
  <option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
  <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
  <option style="color:#008000;" value="#008000">&#9724; Green</option>
  <option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
  <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
  <option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
  <option style="color:#000;" value="#000">&#9724; Black</option>
</select>

颜色不显示需要安装一些插件吗？我想实现这一目标，但我只得到黑匣子

Answer 1

您需要将选定的颜色应用到选择框。这可以通过 JS 的更改事件轻松实现。

const colorBox = document.getElementById('color');

colorBox.addEventListener('change', (event) => {
  const color = event.target.value;
  event.target.style.color = color;
}, false);

<select name="color" class="form-control" id="color">
<option value="">Choose</option>
<option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
<option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
<option style="color:#008000;" value="#008000">&#9724; Green</option>                         
<option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
<option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
<option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
<option style="color:#000;" value="#000">&#9724; Black</option>                       
</select>