Jquery动态添加下拉菜单(克隆)

Question

我有一个带有两个链接下拉列表的表单，我需要制作许多克隆，但保留链接。

这是一个示例，链接组合在我的应用程序中带有 json。

链式代码:

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

形式: http://tinypic.com/r/hsnz8j/6

Answer 1

也许我不太明白您需要什么，但我看到您的“删除”方法会删除所有克隆和模板本身。

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

将删除过滤器中的最后一个。这是你的目标吗？

更好的解决方案不是使用克隆方法，您可以执行以下操作:

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