2

Tengo un problema que no me ocurre en todos los documentos, en este caso tengo tres selects anidados en cascada funciona correctamente si selecciona las opciones con el click pero necesito que al cargar el documento me tome una opción por defecto y esta a su vez actualice las opciones de los otros dos selects, pero no funciona si no únicamente al dar click sobre la opción.

En el html tengo esto:

                        <div class="form-group">
                            <label for="ps_dewey"> 1er Dewey</label>
                            <select id="ps_dewey_id" name="ps_dewey_id"
                                class="form-select block w-full mt-1 rounded border-gray-300">
                                @foreach ($ps_deweys as $ps_dewey)
                                    <option value="{{ $ps_dewey->id }}">{{ $ps_dewey->nombre }}
                                    </option>
                                    @if ($dewey_defecto == $ps_dewey->id) <input id="dewey" type="hidden" value="{{$dewey_defecto}}">  @endif
                                    
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="ss_dewey"> 2do Dewey</label>
                            <select id="ss_dewey_id" name="ss_dewey_id"
                                class="form-select block w-full mt-1 rounded border-gray-300"></select>
                        </div>
                        <div class="form-group">
                            <label for="ts_dewey"> 3er Dewey</label>
                            <select id="ts_dewey_id" name="ts_dewey_id"
                                class="form-select block w-full mt-1 rounded border-gray-300"></select>
                        </div>

Cargo todos los datos desde el controlador y mando el dato que le corresponde por defecto para ese caso en especifico, mediante el @if lo valido y se lo asigno a una input oculto.

De hecho el campo el select si coloca el valor que le asigne pero no efectua los cambios en los otros selects anidados.

He intentado varias formas de ejecutar el evento de cambio que si funciona al seleccionar la opcion manualmente.

$(document).ready(function() {
            $("#ps_dewey_id").val($("#dewey").val()).trigger('select');
        });

Este es el evento que necesito ejecutar.

      $('#ps_dewey_id').on('change', function() {
            let id = $(this).val();
            $('#ss_dewey_id').empty();
            $('#ts_dewey_id').empty();
            $('#ss_dewey_id').append(`<option value="none" hidden selected></option>`);
            $.ajax({
                type: 'GET',
                url: 'ss_dewey/' + id,
                success: function(response) {
                    var response = JSON.parse(response);
                    $('#ss_dewey_id').empty();
                    $('#ss_dewey_id').append(
                        `<option value="none" hidden selected></option>`);
                    response.forEach(element => {
                        $('#ss_dewey_id').append(
                            `<option value="${element['id']}">${element['nombre']}</option>`
                        );
                    });
                }
            });
        });

2 respuestas 2

2

En vez de esto:

$(document).ready(function() {
            $("#ps_dewey_id").val($("#dewey").val()).trigger('select');
        });
...

prueba:

$(document).ready(function() {
    // El evento change antes de hacer el trigger
    $('#ps_dewey_id').on('change', function() {
            let id = $(this).val();
            $('#ss_dewey_id').empty();
            $('#ts_dewey_id').empty();
            $('#ss_dewey_id').append(`<option value="none" hidden selected></option>`);
            $.ajax({
                type: 'GET',
                url: 'ss_dewey/' + id,
                success: function(response) {
                    var response = JSON.parse(response);
                    $('#ss_dewey_id').empty();
                    $('#ss_dewey_id').append(
                        `<option value="none" hidden selected></option>`);
                    response.forEach(element => {
                        $('#ss_dewey_id').append(
                            `<option value="${element['id']}">${element['nombre']}</option>`
                        );
                    });
                }
            });
        });
    // Despues de hacer el bind del evento, el trigger. Puedes cambiar el valor si lo necesitas tambien.
    $("#ps_dewey_id").change();

});

1

que haría yo, primero paso esa lógica para una función


           
    function actualizarSelects(id){
                $('#ss_dewey_id').empty();
                $('#ts_dewey_id').empty();
                $('#ss_dewey_id').append(`<option value="none" hidden selected></option>`);
                $.ajax({
                    type: 'GET',
                    url: 'ss_dewey/' + id,
                    success: function(response) {
                        var response = JSON.parse(response);
                        $('#ss_dewey_id').empty();
                        $('#ss_dewey_id').append(
                            `<option value="none" hidden selected></option>`);
                        response.forEach(element => {
                            $('#ss_dewey_id').append(
                                `<option value="${element['id']}">${element['nombre']}</option>`
                            );
                        });
                    }
                });
    }

después en el change hago esto


$('#ps_dewey_id').on('change', function() {
            let id = $(this).val();
            actualizarSelects(id)
        });

en el html puede cambiar esto


   @foreach ($ps_deweys as $ps_dewey)
      @if ($dewey_defecto == $ps_dewey->id)
         <option selected value="{{ $ps_dewey->id }}">{{ $ps_dewey->nombre }}
                                    </option>
      @else
         <option value="{{ $ps_dewey->id }}">{{ $ps_dewey->nombre }}
                                    </option>
      @endif
   @endforeach

ahora debería verificar que esta variable $dewey_defecto venga con el valor correcto y después



$(document).ready(function() {
            var id = $('#ps_dewey_id').val();
            if (id !== undefined){ // pude validar lo que desee de su lógica
               actualizarSelects(id);
            }
        });

2
  • Muchas gracias, problema resuelto. Una duda, tiene alguna ventaja convertirlo en función en vez de manejarlo directamente con jquery o es simplemente a nivel de detalle del codigo?
    – kevinrueda
    Commented el 21 sept. 2021 a las 19:25
  • 1
    bueno tenerlo como una función le da la ventaja que no tiene repetir ese código además esa funcionalidad le queda encapsulada
    – rene
    Commented el 21 sept. 2021 a las 19:26

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.