Jquery Dynamic Dropdown (Clone) 추가

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(); 
}) 

필터의 마지막 부분을 제거합니다. 그것이 당신의 목표입니까?

더 나은 솔루션은 같은 것을 할 수있는 복제 방법 사용되지 않은 : 내가 드롭 다운을 추가하고, PHP 스크립트에 제출해야합니다

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