Javascript 颜色下拉列表及其在动态下拉列表中的颜色

我正在使用引导表单添加打印机，根据过程选择材料，然后选择相应的颜色。所有这些过程都可以通过动态下拉菜单正常工作。但是我想和颜色一起显示，这样用户就可以正确地知道他选择的颜色。 请指导我如何从脚本中传递颜色及其各自的颜色。用户应该能够看到他添加的颜色

函数fillCategory（）{
//此功能用于在加载时填充类别列表
addOption（document.drop_list.Category，“FDM”、“FDM”和“）；
addOption（document.drop_list.Category，“SLA”、“SLA”和“）；
addOption（document.drop_list.Category，“SLS”、“SLS”和“）；
}
函数SelectSubCat（）{
//选择类别时，此功能将起作用
删除分配选项（文档.下拉列表.子目录）；
添加选项（document.drop_list.SubCat，“，”物料“，”）；
if（document.drop_list.Category.value=='FDM'）{
addOption（文件、下拉列表、子类别“ABS”、“ABS”）；
添加选项（文件下拉列表子标题“PLA”、“PLA”）；
addOption（文档.下拉列表.子类别，“尼龙”，“尼龙”）；
添加选项（文档.下拉列表.子类别，“Hips”，“Hips”）；
addOption（文档.下拉列表.子目录，“PC”，“PC”）；
addOption（document.drop_list.SubCat，“Flex”，“Flex”）；
添加选项（文件、下拉列表、子类别，“木材填充计划”、“木材填充计划”）；
添加选项（文件、下拉列表、子类别“碳纤维”、“碳纤维”）；
addOption（document.drop\u list.SubCat，“ABS+”，“ABS+”）；
}
如果（document.drop\u list.Category.value=='SLA'）{
addOption（文档.下拉列表.子类别，“透明树脂”，“透明树脂”）；
addOption（document.drop_list.SubCat，“类似ABS”、“类似ABS”）；
addOption（document.drop_list.SubCat，“Flex”，“Flex”）；
添加选项（文件、下拉列表、子类别，“浇注料树脂”、“浇注料树脂”）；
}
如果（document.drop\u list.Category.value=='SLS'）{
addOption（文档.下拉列表.子类别，“尼龙12”，“尼龙12”）；
}
}
函数SelectSubCat1（）{
//选择类别时，此功能将起作用
removeAllOptions（document.drop_list.SubCat1）；
addOption（document.drop_list.SubCat1，“，”颜色“，”）；
if（document.drop\u list.Category.value='FDM'和&document.drop\u list.SubCat.value！='Wood Fill PLA'）{
addOption（文件、下拉列表、子目录“白色”、“白色”）；
addOption（文件、下拉列表、子目录“黑色”、“黑色”）；
addOption（文件、下拉列表、子目录“蓝色”、“蓝色”）；
addOption（文件、下拉列表、子目录“红色”、“红色”）；
addOption（文档.下拉列表.子目录“绿色”，“绿色”）；
addOption（文件、下拉列表、子目录“灰色”、“灰色”）；
addOption（文档.下拉列表.子目录1，“橙色”，“橙色”）；
addOption（文件、下拉列表、子目录“黄色”、“黄色”）；
addOption（文件、下拉列表、子目录“银色”、“银色”）；
addOption（document.drop_list.SubCat1，“在黑暗中发光”、“在黑暗中发光”）；
addOption（document.drop_list.SubCat1，“紫色”、“紫色”）；
addOption（文件、下拉列表、子目录“黄金”、“黄金”）；
addOption（document.drop_list.SubCat1，“Brown”、“Brown”）；
addOption（文件、下拉列表、子目录“粉色”、“粉色”）；
}
如果（document.drop_list.SubCat.value=='Wood Fill PLA'）{
addOption（document.drop_list.SubCat1，“Brown”、“Brown”）；
}
if（document.drop\u list.SubCat.value=='ABS Like'）{
addOption（文件、下拉列表、子目录“白色”、“白色”）；
addOption（文件、下拉列表、子目录“黑色”、“黑色”）；
addOption（文件、下拉列表、子目录“灰色”、“灰色”）；
}
如果（document.drop\u list.SubCat.value=='12'）{
addOption（文件、下拉列表、子目录“白色”、“白色”）；
}
if（document.drop\u list.SubCat.value==‘清除树脂’）{
addOption（document.drop_list.SubCat1，“透明/清晰”，“透明/清晰”）；
}
if（document.drop\u list.SubCat.value=='Flex'）{
addOption（document.drop_list.SubCat1，“透明/清晰”，“透明/清晰”）；
}
如果（document.drop\u list.SubCat.value==‘浇注树脂’）{
addOption（document.drop_list.SubCat1，“透明/清晰”，“透明/清晰”）；
}
}
////////////////// 
功能删除分配选项（选择框）
{
var i；
对于（i=selectbox.options.length-1；i>=0；i--）
{
//选择框。选项。删除（i）；
选择框。删除（i）；
}
}
功能添加选项（选择框、值、文本）
{
var optn=document.createElement（“选项”）；
optn.text=文本；
optn.value=值；
选择框。选项。添加（optn）；
}

添加打印机


添加打印机
打印机详细信息
打印机名称
过程
过程
材料
材料
颜色
颜色
力量
高
中间
低
表面光洁度
高
中间
低
每克价格（卢比）
每小时价格（卢比）
添加打印机

您可以这样做

红色
黄色的
紫色

您可以修改addOption函数，为每个选项添加背景色。（或给他们上课）

或者你也可以用css来做

option[value="Black"] {
  background: black;
}

option[value="Red"] {
  background: red;
}

/* and so on... */

演示

函数添加选项（选择框、值、文本）{
var optn=document.createElement（“选项”）；
optn.text=文本；
optn.value=值；
if（optn.value！=（“透明/透明”| |“在黑暗中发光”）{
optn.style.background=值
}
选择框。选项。添加（optn）；
}
//只是为了演示
欺骗
option[value="Black"] {
  background: black;
}

option[value="Red"] {
  background: red;
}

/* and so on... */