Home/ Questions/Q 8796869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:43:14+00:00

I performed various research but I din’t find a solution for my problem. I

  • 0

I performed various research but I din’t find a solution for my problem. I created a drop down select with css to change color of background, but then when I try to clone it with Javascript, the new copy doesn’t change attributes in selection so it keep the original color. Just try it, add some copy and try to change the colors.

I’m new here, i’m not very able to add code so here’s to try:

http://jsfiddle.net/gabry501/FUyA3/
or github

https://github.com/gabry501/Test-Color/blob/master/test.html

HEAD

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script type="text/javascript">

function cloning() {

    var container = document.getElementById('fine');
    var clone = document.getElementById('contenitore').cloneNode(true);
    container.appendChild (clone);

}

STYLE 

select option,
select {
    background-color:white;
    width:200px;
    height:200px;
}

select option[value="1"],
select.o1
{
    background-color:blue;
}

select option[value="2"],
select.o2
{
    background-color:red;
}

select option[value="3"],
select.o3
{
    background-color:orange;
}

BODY

<div style="width:1100px;
height:250px;" id="contenitore">

SCRIPT

<script>$('select[id$=-status][id^=id_item-]').children().each(
    function (){
        if($(this).val() == 0){
            $(this).css('backgroundColor','white');
        }
        if($(this).val() == 1){
            $(this).css('backgroundColor','green');
        }
        if($(this).val() == 2){
            $(this).css('backgroundColor','red');
        }
        if($(this).val() == 3){
            $(this).css('backgroundColor','orange');
        }
    }
);</script>

<script>    
$('select[id$=-status][id^=id_item-]').change(function (){
    var color = $(this).find('option:selected').val();

    $(this).removeClass('o1 o2 o3').addClass('o' + $(this).find('option:selected').val());
}).change();

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    cloneNode() copies only the data of the element in question. it does not copy over the event listeners. You need to do that manually..

    Use the jQuery clone() method..

    function cloning() {

        var container = document.getElementById('fine');
        var clone = $(document.getElementById('contenitore')).clone(true);
        $(container).append(clone);

    }

    Check Fiddle

    PS : Also you code looks really messy . You can scale it down..

    UPDATE
    I have made a few changes to the code .

    1.) Removed the click event from HTML and added that to the script.

    2.) Removed the ID’s and replaced by a className as ID’s in a document are supposed to
    be Unique.

    3.) Removed extra styles and replaced with a simple class Name.

    4.) Better to have separate files for style and script than including it in HTML.

    5.) If you want it to work , move the styles and the script to the corresponding tags I
    have marked..

    HTML

     <!doctype html>
    <html>
       <head>
         <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            // Add the Styles here
        </style>
      </head>

       <body>
          <div style="width:1100px; height:250px;" class="contenitore">
             <select  name="item-0-status">
                <option value="" disabled="disabled" class="optionGroup">SELECT 
                      COLOR</option>
                <option value="1"> BLUE</option>
                <option value="2"> RED </option>
                <option value="3"> ORANGE</option>
             </select>
          </div> <!--Contenitore -->

          <div id="fine"></div>

          <br>
          <div id="bottone">
          <input id="btn" type="button" Value="ADD">
         </div>
           <script type="text/javascript">
               // Script Comes Here
           </script>           

       </body>
    </html>

    Javascript

    $(function() {
    $('select[name="item-0-status"]').change(function() {
        $(this).removeClass('o1 o2 o3').addClass('o' + $(this).val());
    }).change();

    $('#btn').on('click', function() {
        var container = document.getElementById('fine');
        var clone = $(document.getElementsByClassName('contenitore')[0]).clone(true);
        $(container).append(clone);
    });
});​

    Styles

    #bottone
{
   float:left;
   text-align:left;
   clear:left;
   margin-top:20px;
}

select option,select 
{
   background-color:#FFF;
   width:200px;
   height:200px;
}

.o1
{
    background-color:blue;
}

.o2
{
   background-color:red;
}

.o3 
{
   background-color:orange;
}​

    UPDATED FIDDLE

    • 0