select not working after .clone

Question

I am cloning a block of HTML and then appending it to a div.

var part = $('#parts_tpl').clone();
$('#parts_tpl').after(part);

The HTML contains a form and for some reason, the select boxes are not updating there values in the newly cloned HTML. If I try to update the original select box value, it works. I just doesn't work with the newly cloned form.

I have ensured that the newly created select boxes have a unique id, name, etc. This is how I'm doing it:

// increment ids and names for select tags
    $('#' + content.attr('id')).find('select').each(function() {
        var id = $(this).attr('id') + partID;
        var name = $(this).attr('name') + partID;

        if ($(this).attr('id')) { $(this).attr('id', id); }
        if ($(this).attr('name')) { $(this).attr('name', name); }
    });

This is what my HTML looks like:

<div class="parts" id="parts_tpl">
   <fieldset>
      <label>Part Specifications</label>
      <a href="#" class="btn removePartBtn" id="removePartBtn" style="float: right; display: none;">Remove Part</a>
      <section>
         <label for="quote_partSpecification_description">Description&nbsp;<span class="required">&nbsp;</span></label>
         <div>
            <input type="text" id="quote_partSpecification_description" name="quote_partSpecification_description" required="" class="text">
         </div>
      </section>
      <section>
         <label for="quote_partSpecification_estimatedFirstYearVolume">Estimated Year 1 Volume (mft)&nbsp;<span class="required">&nbsp;</span></label>
         <div>
            <!--
               <input type="text" id="quote_partSpecification_estimatedFirstYearVolume" name="quote_partSpecification_estimatedFirstYearVolume">
               -->
            <input id="quote_partSpecification_estimatedFirstYearVolume" name="quote_partSpecification_estimatedFirstYearVolume" type="number" class="integer" required="">
         </div>
      </section>
      <section>
         <label for="quote_partSpecification_estimatedSecondYearVolume">Estimated Year 2 Volume (mft)&nbsp;<span class="required">&nbsp;</span></label>
         <div>
            <!--
               <input type="text" id="quote_partSpecification_estimatedSecondYearVolume" name="quote_partSpecification_estimatedSecondYearVolume">
               -->
            <input id="quote_partSpecification_estimatedSecondYearVolume" name="quote_partSpecification_estimatedSecondYearVolume" type="number" class="integer" required="">
         </div>
      </section>
      <section>
         <label for="quote_partSpecification_estimatedOrderVolume">Estimated Order Volume (mft)</label>
         <div>
            <!--
               <input type="text" id="quote_partSpecification_estimatedOrderVolume" name="quote_partSpecification_estimatedOrderVolume">
               -->
            <input id="quote_partSpecification_estimatedOrderVolume" name="quote_partSpecification_estimatedOrderVolume" type="number" class="integer">
         </div>
      </section>
      <section>
         <label for="quote_partSpecification_partType">Part Type&nbsp;<span class="required">&nbsp;</span></label>
         <div>
            <div class="selector" id="uniform-quote_partSpecification_partType">
               <span>Frame</span>
               <select name="quote_partSpecification_partType" id="quote_partSpecification_partType" required="" style="opacity: 0;">
                  <optgroup label="Select Part Type">
                     <option value="Frame">Frame</option>
                     <option value="Sash">Sash</option>
                     <option value="Single Wall Accessory">Single Wall Accessory</option>
                     <option value="Hollow Accessory">Hollow Accessory</option>
                  </optgroup>
               </select>
            </div>
         </div>
      </section>
      <section>
         <label for="quote_partSpecification_weightPerFoot">Weight per ft</label>
         <div>
            <!--
               <input type="text" id="quote_partSpecification_estimatedOrderVolume" name="quote_partSpecification_estimatedOrderVolume">
               -->
            <input id="quote_partSpecification_weightPerFoot" name="quote_partSpecification_weightPerFoot" type="number" class="decimalToTenThousands g2">
         </div>
      </section>
      <section>
         <label for="quote_partSpecification_dieNumber">Die Number (<em>if existing</em>)</label>
         <div>
            <input type="text" id="quote_partSpecification_dieNumber" name="quote_partSpecification_dieNumber" class="text">
         </div>
      </section>
      <section>
         <label for="quote_partSpecification_plantToProducePart">Plant to Product Part&nbsp;<span class="required">&nbsp;</span></label>
         <div>
            <div class="selector" id="uniform-quote_partSpecification_plantToProducePart">
               <span>Plant 1</span>
               <select name="quote_partSpecification_plantToProducePart" id="quote_partSpecification_plantToProducePart" required="" style="opacity: 0;">
                  <optgroup label="Select Plant">
                     <option value="Plant 1">Plant 1</option>
                     <option value="Plant 2">Plant 2</option>
                     <option value="Plant 13">Plant 13</option>
                     <option value="Plant 14">Plant 14</option>
                     <option value="Bristol">Bristol</option>
                     <option value="To Be Determined">To Be Determined</option>
                  </optgroup>
               </select>
            </div>
         </div>
      </section>
      <section>
         <label for="quote_partSpecification_packaging">Packaging</label>
         <div>
            <div class="selector" id="uniform-quote_partSpecification_packaging">
               <span>Metal Rack</span>
               <select name="quote_partSpecification_packaging" id="quote_partSpecification_packaging" style="opacity: 0;">
                  <optgroup label="Select Packaging">
                     <option value="Metal Rack">Metal Rack</option>
                     <option value="Wood Rack">Wood Rack</option>
                     <option value="Paperboard">Paperboard</option>
                     <option value="Polybag">Polybag</option>
                     <option value="Other">Other</option>
                     <option value="Customer Supplied Rack">Customer Supplied Rack</option>
                  </optgroup>
               </select>
            </div>
         </div>
      </section>
      <section>
         <label for="quote_partSpecification_cutLength">Cut Length (in)</label>
         <div>
            <!--
               <input type="text" id="quote_partSpecification_cutLength" name="quote_partSpecification_cutLength">
               -->
            <input id="quote_partSpecification_cutLength" name="quote_partSpecification_cutLength" type="number" class="integer">
         </div>
      </section>
   </fieldset>
</div>

Does anyone know whats going on?

Things I have tried:

Can you show how you are updating them? i doubt the cloning of it is where the problem is. — Kevin B, May 21 '13 at 15:38
Did you ensure the "parts_tpl" id isn't reused ? How ? The code we see would produce duplicated id. — Denys Séguret, May 21 '13 at 15:38
@dystroy Yes I made sure to increment the parts_tpl. Kevin, I updated my question with how Im updating the id's and names. — Farhan Ahmad, May 21 '13 at 15:41
[duplicate question](http://stackoverflow.com/questions/4599773/jquery-clone-select-doesnt-keep-value) — km6zla, May 21 '13 at 18:18

score 1 · Accepted Answer · edited May 23 '17 at 11:57

Ok so as it turns out. I was using a plugin called Uniform. Uniform does not play well with selects being cloned. This is what I had to do to fix it.

// fix uniform to update properly on cloned elements
$('select').change(function() { 
    $.uniform.update('#' + $(this).attr('id')); 
});

Reference(s):

score 0 · Answer 2 · answered Dec 05 '13 at 11:35

I also had a problem with uniform and cloning, mine was with a checkbox which was acting weird after cloning, and what I did to fix it was to use uniform "restore" which basically removes uniform from all elements, I then cloned what I had to clone, and reapplied uniform. I guess I could have used restore on just the single clone source element if I wanted instead of removing from all (didn't check).

So it ended up looking like this:

$.uniform.restore($( "select, input:checkbox, input:radio, input:file")); // remove uniform effects
var clonedItem = $("#originalItem").clone(); // clone and add
$("body").append(clonedItem);
$( "select, input:checkbox, input:radio, input:file").uniform(); // restore uniform

Hope this helps someone.

select not working after .clone

2 Answers2

Linked