2

2 つのチェーンされたドロップダウン リストを持つフォームがあり、多くのクローンを作成する必要がありますが、チェーンを保持します。

これは一例です。チェーン コンボは、私のアプリで 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

4

1 に答える 1

1

何が必要なのかわからないかもしれませんが、「削除」メソッドはすべてのクローンとテンプレート自体を削除することがわかります。

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

フィルターの最後のものを削除します。それがあなたの目標ですか？

より良い解決策は、次のようなことができる clone メソッドを使用しないことです。

<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>
于 2012-10-27T16:31:07.043 に答える