如何获得具有不同背景颜色的下拉菜单。下拉选项是动态的

Posted 2023-04-13

【中文标题】如何获得具有不同背景颜色的下拉菜单。下拉选项是动态的

【英文标题】：How to get a dropdown with different background colors. Dropdown options are dynamic

【发布时间】：2019-12-08 17:45:24

【问题描述】：

我想根据值获得具有不同背景颜色的动态下拉列表。值：红色 -> 背景颜色：红色等等...

下拉列表由 SQL 数据库中的表填充。

安培尔

【问题讨论】：

在这里添加您尝试过的代码

Ampel

【参考方案1】：

这个 sn-p 会做你需要的。

$('#mySelect > option').each(function() 

  $(this).css('background-color', $(this).val());

);

$('#mySelect').on('change', function() 

  $('#mySelect').css('background-color', $(this).val());

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="mySelect">

  <option value="red">red</option>
  <option value="green">green</option>
  <option value="blue">blue</option>
  <option value="orange">orange</option>

</select>

【讨论】：

它是否也适用于动态选项？因为它通过一个表连接到一个sql数据库。 ID：1 描述：红色，ID：2 描述：黄色等等...

Ampel

这是我在 html 中的代码，用于下拉列表，它连接到 sql 数据库

@ThyLe 是的。只需使用数据库中的值来更新每个选项的“值”属性。

谢谢！现在我希望下拉框是我在下拉列表中选择的颜色。这可能吗？