Skip to main content

Añadir select dinámico con jQuery

Estoy realizando un tipo de duplicación o clonación de 2 select en html, estoy usando una función en jquery que

<script>
          $(document).ready(function(){            
            var formulario = $("#select").html();
            $("#agregar").click(function(){
                $("#contenido").prepend(formulario);
                Plugins();
            });
          });
</script>

y duplica bien los select, pero son select dinámicos y el segundo select depende del primero, entonces me encontré con el dilema de como les agrego id y name a los select nuevo y como los hago independientes de los originales. Así hice la función de los select dinámicos :

<script type="text/javascript">
    $('select[name=categoria_id]').change(function () {
        var categoria_id = $(this).val();

        $.get('/Conjuntos/getSubCategorias/' + categoria_id, function (cidades) {
            console.log(cidades);
            $('select[name=categoriasub_id]').empty();
            $('select[name=categoriasub_id]').append('<option value=""> Seleccione </option>');
            $.each(cidades, function (key, value) {
                $('select[name=categoriasub_id]').append('<option value=' + key + '>' + value + '</option>');
            });
        });
    });
</script>

y el html :

<div class="panel panel-success ">
<div class="panel-heading">Categoría - Subcategoría
    <a href="#" id="agregar"><i class="fa fa-plus"></i></a>
</div>
<div id="select" class="panel-body">
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="categoria">Categoría <span
                    class="required">*</span></label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <select required="required" class="form-control" name="categoria_id" id="sle1"
                    value="{{ old('categoria_id') }}">
                <option value=""> Seleccione</option>
                @foreach ($categorias as $key => $val)
                    <option value="{{ $key }}" {{ $key == old('categoria_id') ? 'selected' : '' }}>{{ $val }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="item form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="rif">Sub-Categoría <span
                    class="required">*</span></label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <select required="required" class="form-control" name="categoriasub_id">
                <option value=""> Seleccione</option>
                @foreach ($subcategorias as $key => $val)
                    <option value="{{ $key }}" {{ $key == old('categoriasub_id') ? 'selected' : '' }}>{{ $val }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div id="contenido"></div>
</div>