title: Jquery Dynamic Add Dropdown (Clone)
body: <p>I have a a form with two chained dropdownlist and I need make a many clones, but preserve the chaining.</p>
  
  <p>this is an example, the chained combo is with json in my app.</p>
  
  <p>Chained Code:</p>
  
  <pre><code>&lt;form id="test" action="/ventas/add/" &gt;
      &lt;div class="row-fluid"&gt;
              &lt;div class="row-fluid"&gt;   
              &lt;div class="span5"&gt;
              &lt;label for="VentaComunicacioneId"&gt;Programas:&lt;/label&gt;
  
              &lt;select id="VentaProgramaId"&gt;
              &lt;option value="" selected="selected"&gt;(Seleccione Programa)&lt;/option&gt;
                  &lt;?php foreach($programas as $key =&gt; $programa): ?&gt;
  
                   &lt;option class="&lt;?php echo $key; ?&gt;" value="&lt;?php echo $key; ?&gt;"&gt;&lt;?php echo $programa; ?&gt;&lt;/option&gt;
                  &lt;?php endforeach; ?&gt;
              &lt;/select&gt;
  
  
              &lt;/div&gt;&lt;!--/span--&gt;
              &lt;div class="span6"&gt; 
                &lt;label for="VentaComunicacioneId"&gt;Niveles:&lt;/label&gt;
  
              &lt;select id="VentaMuestraId" name="data[Muestra][muestra_id]"&gt;
  
  
              &lt;/select&gt;
  
                &lt;div style="margin:-36px 0px 10px 223px; position:relative;"&gt;
                    &lt;button class="btn btn-small btn-success" id="add" type="button"&gt;+&lt;/button&gt;&lt;button class="btn btn-small btn-danger" id="remove" type="button"&gt;-&lt;/button&gt;
                  &lt;/div&gt;
               &lt;div id="clon"&gt;
  
               &lt;/div&gt;
  
  
              &lt;/div&gt;&lt;!--/span--&gt;
            &lt;/div&gt;&lt;!--/row--&gt;         
  
         &lt;/div&gt;
              &lt;div class="row-fluid"&gt;
              &lt;div class="span10"&gt;
                &lt;label&gt;Comentarios:&lt;/label&gt;
                &lt;textarea  id="comentario" name="data[Venta][comentario]" class="field span12" placeholder="Comentario" rows="5"&gt;&lt;/textarea&gt;   
              &lt;/div&gt;          
              &lt;/div&gt;
              &lt;div class="row-fluid"&gt;
              &lt;div class="span4"&gt;
               &lt;button class="btn btn-warning" id="sbmit" type="submit"&gt;Guardar&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;&lt;!--/row--&gt;                         
          &lt;/div&gt;&lt;!--/span--&gt;
         &lt;/div&gt;
         &lt;div class="span4"&gt;
         &lt;/div&gt;&lt;!--/span--&gt;       
        &lt;?php  echo $this-&gt;Form-&gt;hidden('colegio_id'); ?&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
          $('#VentaProgramaId').on("change",function() {
                  var id = $(this).val();
                  var select = $('#VentaMuestraId');      
                  select.empty();
                  $('&lt;option/&gt;').attr('value', 0).html('- Seleccione Nivel -').appendTo(select);
                   $.getJSON('/admin/muestras/get/'+id, function(data) {
                      $.each(data, function(key, val){
                      $('&lt;option/&gt;').attr('value', val.Muestra.id).html(val.Muestra.nombre).appendTo(select);
              });
          }); 
      });
  
      $('#add').on("click",function() {
          $('#VentaMuestraId').clone().appendTo('#clon');
          $('#VentaProgramaId').clone().appendTo('#clon');
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/UsBsX/79/" rel="nofollow noreferrer">http://jsfiddle.net/UsBsX/79/</a></p>
  
  <p>form:
  <a href="http://tinypic.com/r/hsnz8j/6" rel="nofollow noreferrer">http://tinypic.com/r/hsnz8j/6</a></p>