1. 홈
  2. 질의 응답
  3. 동적 드롭 다운에서 색상이있는 색상 드롭 다운

동적 드롭 다운에서 색상이있는 색상 드롭 다운

2017-12-29 13 views
3

프린터를 추가하기 위해 부트 스트랩 양식을 사용하면 프로세스를 기반으로 재질이 선택되고 각 색상이 선택됩니다. 이 모든 프로세스는 동적 드롭 다운으로 잘 작동합니다. 하지만 나는 사용자가 색을 선택하는 올바른 아이디어를 얻을 수 있도록 색상과 함께 표시하고 싶습니다. 스크립트에서 해당 색상의 색상을 전달하는 방법을 알려주십시오. 사용자는 그가 추가하고있는 색상을 볼 수 있어야합니다. 동적 드롭 다운에서 색상이있는 색상 드롭 다운

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

dynamic dropdown

는

출처

2017-12-29 rashmi sm

답변

1

당신이 뭔가를 할 수 있습니다.

<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

+0

선생님, 동적 드롭 다운을

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에서 그것을 할 수는 스크립트에서 값 가져 오기, 스타일 추가 방법 e in script –

+0

위 스타일을 동적으로 추가 할 수 있습니다. –

+0

plz 가이드 나를 동적으로 추가하는 방법, 매우 감사 드리겠습니다. –

2

로

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

통화 기능을 호출하는 동안 색 이름을 입력합니다. ,

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

 관련 문제

  • 관련 문제 없음^_^