0

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>

3
  • Cual es la pregunta? en donde esta el problema amigo Commented el 19 dic. 2017 a las 19:03
  • el problema es que los select que se duplican tiene que ser independiente de loa originales, por ejemplo si selecciono una categoria en el primer select original solo deberia cargarse las subcategorias del select de abajo de el. pero en cambio todos los select q se duplicaron cargan las subcategoria segun el primer select.. no se si me explico
    – developer
    Commented el 19 dic. 2017 a las 19:15
  • ¿Quizá porque al duplicarlos haces que todos tengan el mismo name? Commented el 20 dic. 2017 a las 8:05

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.