Javascript [SOLVED]: color dropdown with its color in dynamic dropdown

Javascript [SOLVED]: color dropdown with its color in dynamic dropdown

Home Forums Scripting Javascript Tutorials Javascript [SOLVED]: color dropdown with its color in dynamic dropdown

Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #245683

    Cloudy Point
    Keymaster

    QuestionQuestion

    Im using bootstrap form to add a printer, Based on the process, material will choosen and then respective color should be choosen. These all process is working fine with dynamic dropdown. But I want to display along with color so that the user will get correct idea which color he is choosing.
    Please guide me how to pass color with its respective color from the script. User should be able to see which color he is adding.

    dynamic dropdown

      <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>

    #245684

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    You can do something like this.

    <select>
        <option value="1" style="background:red">Red</option>
        <option value="2" style="background:yellow">Yellow</option>
        <option value="3" style="background:purple">Purple</option>
    </select>

    Modify your addOption() method as below.
    Provide color name while calling the below function

    function addOption(selectbox, value, text, color) // added extra parameter color.
    {
        var optn = document.createElement("OPTION");
        optn.text = text;
        optn.value = value;
        optn.style.backgroundColor = color; // added new statement
        selectbox.options.add(optn);
    }
    

    Call function as

      // passing 4th parameter as color blue.
        addOption(document.drop_list.SubCat1,"Blue", "Blue", "blue");
    

    Source: https://stackoverflow.com/questions/48020589/color-dropdown-with-its-color-in-dynamic-dropdown
    Author: Nitin Dhomse
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.