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

Question

我正在使用 bootstrap 表单添加打印机，根据过程，将选择 Material ，然后选择相应的颜色。这些所有过程都可以通过动态下拉列表正常工作。但我想与颜色一起显示，以便用户正确了解他选择的颜色。请指导我如何从脚本中传递颜色及其各自的颜色。用户应该能够看到他正在添加哪种颜色。

  <script language="javascript">
function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "FDM", "FDM", "");
addOption(document.drop_list.Category, "SLA", "SLA", "");
addOption(document.drop_list.Category, "SLS", "SLS", "");
}

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "Material", "");

if(document.drop_list.Category.value == 'FDM'){
addOption(document.drop_list.SubCat,"ABS", "ABS");
addOption(document.drop_list.SubCat,"PLA", "PLA");
addOption(document.drop_list.SubCat,"Nylon", "Nylon");
addOption(document.drop_list.SubCat,"Hips", "Hips");
addOption(document.drop_list.SubCat,"PC", "PC");
addOption(document.drop_list.SubCat,"Flex", "Flex");
addOption(document.drop_list.SubCat,"Wood Fill PLA", "Wood Fill PLA");
addOption(document.drop_list.SubCat,"Carbon Fiber", "Carbon Fiber");
addOption(document.drop_list.SubCat,"ABS+", "ABS+");
}
if(document.drop_list.Category.value == 'SLA'){
addOption(document.drop_list.SubCat,"Clear Resin", "Clear Resin");
addOption(document.drop_list.SubCat,"ABS Like", "ABS Like");
addOption(document.drop_list.SubCat,"Flex", "Flex");
addOption(document.drop_list.SubCat,"Castable Resin", "Castable Resin");
}
if(document.drop_list.Category.value == 'SLS'){
addOption(document.drop_list.SubCat,"Nylon 12", "Nylon 12");

}

}
function SelectSubCat1(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat1);
addOption(document.drop_list.SubCat1, "", "Color", "");

if(document.drop_list.Category.value == 'FDM' && document.drop_list.SubCat.value != 'Wood Fill PLA'){
addOption(document.drop_list.SubCat1,"White", "White");
addOption(document.drop_list.SubCat1,"Black", "Black");
addOption(document.drop_list.SubCat1,"Blue", "Blue");
addOption(document.drop_list.SubCat1,"Red", "Red");
addOption(document.drop_list.SubCat1,"Green", "Green");
addOption(document.drop_list.SubCat1,"Grey", "Grey");
addOption(document.drop_list.SubCat1,"Orange", "Orange");
addOption(document.drop_list.SubCat1,"Yellow", "Yellow");
addOption(document.drop_list.SubCat1,"Silver", "Silver");
addOption(document.drop_list.SubCat1,"Glow-in-the-dark", "Glow-in-the-dark");
addOption(document.drop_list.SubCat1,"Purple", "Purple");
addOption(document.drop_list.SubCat1,"Gold", "Gold");
addOption(document.drop_list.SubCat1,"Brown", "Brown");
addOption(document.drop_list.SubCat1,"Pink", "Pink");
}
if(document.drop_list.SubCat.value == 'Wood Fill PLA'){
addOption(document.drop_list.SubCat1,"Brown", "Brown");
}

if(document.drop_list.SubCat.value == 'ABS Like'){
addOption(document.drop_list.SubCat1,"White", "White");
addOption(document.drop_list.SubCat1,"Black", "Black");
addOption(document.drop_list.SubCat1,"Grey", "Grey");
}

if(document.drop_list.SubCat.value == 'Nylon 12'){
addOption(document.drop_list.SubCat1,"White", "White");
}
if(document.drop_list.SubCat.value == 'Clear Resin'){
addOption(document.drop_list.SubCat1,"Transparent/clear", "Transparent/clear");
}
if(document.drop_list.SubCat.value == 'Flex'){
addOption(document.drop_list.SubCat1,"Transparent/clear", "Transparent/clear");
}
if(document.drop_list.SubCat.value == 'Castable Resin'){
addOption(document.drop_list.SubCat1,"Transparent/clear", "Transparent/clear");
}

}
////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
	
	selectbox.options.add(optn);
}

</script>

<?php
session_start();
if(empty($_SESSION)){
header("Location: ../login.php");
exit(); }
$mpage = "printer";
$page = "add_printer.php";
include '../header.php';
?>

<!DOCTYPE html>
<html>
 


  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        ADD PRINTER
       
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Printer</a></li>
        <li class="active">Add Printer</li>
      </ol>
    </section>

	
	<body  onload="fillCategory();">
    <!-- Main content -->
    <section class="content">
	
	<div class="col-md-12">
	 <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">Printer Details</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form class="form-horizontal" method="post" name="drop_list">
              <div class="box-body">
                <div class="form-group">
                  <label for="inputname" class="col-sm-4 control-label">Printer Name</label>

                  <div class="col-sm-6">
                    <input type="text" class="form-control" id="inputname" placeholder="Printer Name" name="printer_name">
                  </div>
                </div>
				
				<div class="form-group">
				<label for="Process" class="col-sm-4 control-label">Process</label>
				
				<div class="col-sm-6">
				<SELECT  NAME="Category" class="form-control" onChange="SelectSubCat();" > 
				<Option value="">Process</option>
				</SELECT>
				</div>
				</div>

				<div class="form-group">
				<label for="Material" class="col-sm-4 control-label">Material</label>
				<div class="col-sm-6">
				<SELECT id="SubCat" NAME="SubCat[]" class="form-control" onChange="SelectSubCat1();" multiple>
				<Option value="">Material</option>
				
				</SELECT>
		
				</div>
				
				</div>
				
				<div class="form-group">
				<label for="Color" class="col-sm-4 control-label">Color</label>
				<div class="col-sm-6">
						<SELECT id="SubCat1" NAME="SubCat1" class="form-control" >
				<option value="" disabled selected >Color</option>
				</SELECT>
							
				</div>
				
				</div>
				
				
				<div class="form-group">
                  <label for="quality" class="col-sm-4 control-label">Strength</label>
				  <div class="col-sm-6">
				  <select class="form-control" name="strength">
                  <option selected="selected">High</option>
                  <option >Mid</option>
                  <option>Low</option>
                  </select>
				</div>
				</div>
				
				
				
				  <div class="form-group">
                  <label for="surfacefinish" class="col-sm-4 control-label">Surface Finish</label>
				  <div class="col-sm-6">
				  <select class="form-control" name="surface_finish">
                   <option selected="selected">High</option>
                  <option>Mid</option>
                  <option>Low</option>
                  </select>
				</div>
				</div>
				
				<div class="form-group">
				<label for="per_gram_charge" class="col-sm-4 control-label">Per Gram Price&nbsp(Rs.) </label>
				<div class="col-sm-6">
				<input type="number"  class="form-control" id="per_gram_charge" step="0.01" name="per_gram_charge" placeholder="0.00">
				</div>
				</div>
				
				<div class="form-group">
				<label for="per_hour_charge" class="col-sm-4 control-label">Per Hour Price&nbsp(Rs.) </label>
				<div class="col-sm-6">
				<input type="number" class="form-control" id="per_hour_charge" step="0.01" name="per_hour_charge" placeholder="0.00">
				</div>
				</div>
						
				
              </div></div>
              <!-- /.box-body -->
              <div class="box-footer">
                
                <button type ="submit" name="submit" value="submit" class="btn btn-info pull-right" >Add Printer</button>
              </div>
              <!-- /.box-footer -->
            </form></div>
			

		  </div>
		  
    </section>
	</body>

<?php

include '../footer.php';

?>


</html>

Answer 1

您可以修改 addOption 函数来为每个选项添加背景颜色。 (或者给他们上课)

function addOption(selectbox, value, text) {
  var optn = document.createElement("OPTION");
  optn.text = text;
  optn.value = value;
  if(optn.value != ('Transparent/clear' || 'Glow-in-the-dark')){
    optn.style.background = value
  }
  selectbox.options.add(optn)
}

或者你可以用css做

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

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

/* and so on... */

演示

function addOption(selectbox, value, text) {
  var optn = document.createElement("OPTION");
  optn.text = text;
  optn.value = value;
  if(optn.value != ('Transparent/clear' || 'Glow-in-the-dark')){
    optn.style.background = value
  }
  selectbox.options.add(optn);
}

// Just for the demo
const selectBox = document.querySelector('select')
const colors = ['Red', 'Transparent/clear', 'Glow-in-the-dark', 'Blue', 'Goldenrod']

colors.forEach(color => addOption(selectBox, color, color))

<select></select>