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

Question

I want to get a dynamic dropdown with different backgroundcolors depending on the value. value: red -> backgroundcolor: red and so on...

Dropdown is filled by table in SQL-database.

Ampel

Answer 1

This snippet will do what you need.

 $('#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>