ダイナミックドロップダウンでの色のドロップダウンカラー

プリンタに追加するブートストラップフォームを使用して、プロセスに基づいてマテリアルが選択され、それぞれの色が選択されます。これらのすべてのプロセスは、動的なドロップダウンでうまくいきます。しかし、色と一緒に表示したいので、ユーザーは自分がどの色を選択しているかを正確に知ることができます。スクリプトの色をそれぞれの色で渡す方法を教えてください。ユーザーは彼がどの色を追加しているか見ることができます。ダイナミックドロップダウンでの色のドロップダウンカラー

<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) 
 
{ 
 
\t var i; 
 
\t for(i=selectbox.options.length-1;i>=0;i--) 
 
\t { 
 
\t \t //selectbox.options.remove(i); 
 
\t \t selectbox.remove(i); 
 
\t } 
 
} 
 

 

 
function addOption(selectbox, value, text) 
 
{ 
 
\t var optn = document.createElement("OPTION"); 
 
\t optn.text = text; 
 
\t optn.value = value; 
 
\t 
 
\t 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> 
 

 
\t 
 
\t <body onload="fillCategory();"> 
 
    <!-- Main content --> 
 
    <section class="content"> 
 
\t 
 
\t <div class="col-md-12"> 
 
\t <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> 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t <label for="Process" class="col-sm-4 control-label">Process</label> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t <SELECT NAME="Category" class="form-control" onChange="SelectSubCat();" > 
 
\t \t \t \t <Option value="">Process</option> 
 
\t \t \t \t </SELECT> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t <label for="Material" class="col-sm-4 control-label">Material</label> 
 
\t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t <SELECT id="SubCat" NAME="SubCat[]" class="form-control" onChange="SelectSubCat1();" multiple> 
 
\t \t \t \t <Option value="">Material</option> 
 
\t \t \t \t 
 
\t \t \t \t </SELECT> 
 
\t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t <label for="Color" class="col-sm-4 control-label">Color</label> 
 
\t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t <SELECT id="SubCat1" NAME="SubCat1" class="form-control" > 
 
\t \t \t \t <option value="" disabled selected >Color</option> 
 
\t \t \t \t </SELECT> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
        <label for="quality" class="col-sm-4 control-label">Strength</label> 
 
\t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t <select class="form-control" name="strength"> 
 
        <option selected="selected">High</option> 
 
        <option >Mid</option> 
 
        <option>Low</option> 
 
        </select> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
        <label for="surfacefinish" class="col-sm-4 control-label">Surface Finish</label> 
 
\t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t <select class="form-control" name="surface_finish"> 
 
        <option selected="selected">High</option> 
 
        <option>Mid</option> 
 
        <option>Low</option> 
 
        </select> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t <label for="per_gram_charge" class="col-sm-4 control-label">Per Gram Price&nbsp(Rs.) </label> 
 
\t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t <input type="number" class="form-control" id="per_gram_charge" step="0.01" name="per_gram_charge" placeholder="0.00"> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t <label for="per_hour_charge" class="col-sm-4 control-label">Per Hour Price&nbsp(Rs.) </label> 
 
\t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t <input type="number" class="form-control" id="per_hour_charge" step="0.01" name="per_hour_charge" placeholder="0.00"> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t 
 
       </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> 
 
\t \t \t 
 

 
\t \t </div> 
 
\t \t 
 
    </section> 
 
\t </body> 
 

 
<?php 
 

 
include '../footer.php'; 
 

 
?> 
 

 

 
</html>

出典

2017-12-29 rashmi sm

あなたはこのような何かを行うことができます。

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

次のようにあなたのaddOption（）メソッドを変更します。通話機能は、あなたが各オプションの背景色を追加するにはaddOption機能を変更することができ

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

出典

2017-12-29 09:55:04

卿、そのダイナミックなドロップダウンにそれを行うこと（あるいは、彼らにクラスを与える）、そのスクリプトから値を取得する方法、スタイルを追加する方法スクリプト内で –

上記のスタイルを動的に追加することができます。 –

plz私を動的に追加する方法、私は非常に感謝します。 –

として

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); 
}

以下の関数を呼び出している間は、色の名前を提供します。

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>

出典

2017-12-29 10:15:22 VilleKoo

ダイナミックドロップダウンでの色のドロップダウンカラー

答えて

関連する問題