Jquery Dynamic Add Dropdown (Clone)

Question

I have a a form with two chained dropdownlist and I need make a many clones, but preserve the chaining.

this is an example, the chained combo is with json in my app.

Chained Code:

<form id="test" action="/ventas/add/" >
    <div class="row-fluid">
            <div class="row-fluid">   
            <div class="span5">
            <label for="VentaComunicacioneId">Programas:</label>

            <select id="VentaProgramaId">
            <option value="" selected="selected">(Seleccione Programa)</option>
                <?php foreach($programas as $key => $programa): ?>

                 <option class="<?php echo $key; ?>" value="<?php echo $key; ?>"><?php echo $programa; ?></option>
                <?php endforeach; ?>
            </select>


            </div><!--/span-->
            <div class="span6"> 
              <label for="VentaComunicacioneId">Niveles:</label>

            <select id="VentaMuestraId" name="data[Muestra][muestra_id]">


            </select>

              <div style="margin:-36px 0px 10px 223px; position:relative;">
                  <button class="btn btn-small btn-success" id="add" type="button">+</button><button class="btn btn-small btn-danger" id="remove" type="button">-</button>
                </div>
             <div id="clon">

             </div>


            </div><!--/span-->
          </div><!--/row-->         

       </div>
            <div class="row-fluid">
            <div class="span10">
              <label>Comentarios:</label>
              <textarea  id="comentario" name="data[Venta][comentario]" class="field span12" placeholder="Comentario" rows="5"></textarea>   
            </div>          
            </div>
            <div class="row-fluid">
            <div class="span4">
             <button class="btn btn-warning" id="sbmit" type="submit">Guardar</button>
            </div>
          </div>
          </div><!--/row-->                         
        </div><!--/span-->
       </div>
       <div class="span4">
       </div><!--/span-->       
      <?php  echo $this->Form->hidden('colegio_id'); ?>
</form>

<script type="text/javascript">
$(document).ready(function() {
        $('#VentaProgramaId').on("change",function() {
                var id = $(this).val();
                var select = $('#VentaMuestraId');      
                select.empty();
                $('<option/>').attr('value', 0).html('- Seleccione Nivel -').appendTo(select);
                 $.getJSON('/admin/muestras/get/'+id, function(data) {
                    $.each(data, function(key, val){
                    $('<option/>').attr('value', val.Muestra.id).html(val.Muestra.nombre).appendTo(select);
            });
        }); 
    });

    $('#add').on("click",function() {
        $('#VentaMuestraId').clone().appendTo('#clon');
        $('#VentaProgramaId').clone().appendTo('#clon');
    });

});
</script>

http://jsfiddle.net/UsBsX/79/

form: http://tinypic.com/r/hsnz8j/6

demon.mhm · Accepted Answer · 2012-10-27 17:18:38Z

1

Maybe I'm not exactly understand what do you need, but I see that your 'remove' method removes all clones and template itself.

$('#remove').on("click",function() {
    $('#filters #template').last().remove();
})

will remove last one in filter. Is that your goal?

better solution is not use clone method you can do something like:

<a id="clone" href="#">+</a> <a id="remove" href="#">-</a>
<div id="filters"></div>

<script id="template" type="text/template">
  <div class="select">
    <select id="mark" name="mark[]">
       <option value="">--</option>
       <option value="1">Book Category 1</option>
       <option value="2">Book Category 2</option>
    </select>
    <select id="series" name="series[]">
        <option value="">--</option>
        <option value="series-3">3 series</option>
        <option value="series-5">5 series</option>
        <option value="series-6">6 series</option>
        <option value="a3">A3</option>
    </select>
  </div>
</script>

<script type="text/javascript">
    $(function(){
        $('#clone').on("click",function() {
            $('#template').html().appendTo('#filters');
        });
        $('#remove').on("click",function() {
            $('#filters .select').last().remove();
        });
    });
</script>

edited Oct 27, 2012 at 17:18

answered Oct 27, 2012 at 16:31

demon.mhm

5694 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mbarrerar Over a year ago

i need add dropdowns, and submit to php script, but the dropdown is chained and when cloning this losing the "chained"

demon.mhm Over a year ago

So, I think my solution will work in this case if you want to remove last appended select by clicking on '-'. Did you already tried it?

demon.mhm Over a year ago

to correct submit this form give selects a names with [] in it. I've updated the code.

Collectives™ on Stack Overflow

Jquery Dynamic Add Dropdown (Clone)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related