0

tengo una ventana modal en la cual tengo un select que lleno condatos desde una base de datos, dicho select lo lleno de la siguiente forma:

function cargaSeries(tecnico_id){
        tecnico_id = $("#tecnico option:selected").val();
        $('#materiales').val('');
            $.ajax({
                url:"{{ url('/devolucion/nuevos/series') }}"+`/${tecnico_id}`,
                method:"get",
                dataType: "json",
                success:function(result){
                    console.log(result)
                    var opciones = '';
                    //var opciones = '<option value="" disabled="disabled">--Series Asignadas--</option>';
                    result.data.forEach(element => {
                    opciones += `<option value="${element.macID}">${element.mac}</option>`;
                     });

                    $("#modal-seriado #mac").html(opciones);
                    }
            });
    }

Hasta ahí bien, en el modal se cargan el/los datos, ahora tengo una función mediante la cual hago una operación a la base de datos con el valor del select que seleccione el usuario, pero no me funciona el evento con el primer elemento del select (cuando hay mas de uno, selecciono el segundo, el tercero y funcionan, pero el primer elemento nunca funciona), la funcion es esta:

 $("#mac").on('change', function(){
            //console.log('al menos llego a la funcion');
            var mac = $("#mac option:selected").text();
            var id = $(this).val();
            //console.log(fecha);
            var data = {
                "_token": $('#token').val(),
           /*   fecha_asignacion_serie:fecha_asignacion_serie,
                tecnico_id:tecnico_id,
                user_id:user_id,*/
                id:id,
                mac:mac
            };
            $.ajax({
                url: "/devolucion/nuevos/series/devolver",
                type: "post",
                data: data ,
                success: function (response) {
                    console.log("todo bien",response);
                    $('#notificarError').empty();
                    if (response.errores.length > 0) {
                        /* alert("Hay u error"); */
                        var errores = response.errores;
                        $('#notificarError').append("<ul>");
                        $.each(errores, function (ind, elem) {
                            console.log(elem);
                            //
                            $('#notificarError').append("<li>" + elem.error + "</li>");

                        });
                        $('#notificarError').append("</ul>");

                        $('#notificarError').toggle();

                    }else{

                        $('#notificaExito').empty();
                    if (response.exito.length > 0) {
                        /* alert("Hay u error"); */
                        var exito = response.exito;
                        $('#notificaExito').append("<ul>");

                        $('#notificaExito').append("<li>" + response.exito + "</li>");

                        $('#notificaExito').append("</ul>");

                        $('#notificaExito').toggle();

                    }
                    $('#mac').val('');
                }
               /*  error: function(jqXHR, textStatus, errorThrown) {
                console.log(textStatus, errorThrown);
                } */

            },
            });

    });

El codigo para levantar el modal:

//LLAMADO DESDE EL BOTON DEL PRODUTO AGREGADO
        function modal(material_id){
            var tecnico_id = $("#tecnico option:selected").val();
            //cargarSeries();
            var material_id = $('#materiales option:selected').val();
            var user_id = $("#user_id").val();
            //var series =  cargaSeries;

            $("#modal-seriado #material_id").val(material_id);
            $("#modal-seriado #tecnico_id").val(tecnico_id);

            $("#modal-seriado #user_id").val(user_id);

            $('#modal-seriado').modal('show');
        }

y el select (que esta en la ventana modal):

  <div class="form-group">
                    <label for="series">SELECCIONE MAC A DEVOLVER</label>
                    <select name="mac" id="mac" class="form-control">

                    </select>
                </div>

En consola no arroja ningún error al ejecutarse, y en la modal se muestra asi: introducir la descripción de la imagen aquí

En que puedo estar fallando?

Saludos a todos

5
  • 2
    El evento on change, como su nombre lo indica, funciona cuando el option cambia, dado que el primero está seleccionado de por sí, el on change no funciona, prueba a seleccionar otro option y luego a seleccionar el primero, ahí sí debería funcionar. Para evitar esto, se suele poner por defecto un option del tipo --Seleccione un ... -- eso permite que siempre haya un cambio cuando selecciones cualquiera de los option, incluyendo el primero. Sea como sea, comparte un ejemplo mínimo y verificable del código para que podamos probarlo. Otros factores pueden influir en el no funcionamiento.
    – A. Cedano
    Commented el 3 ago. 2021 a las 2:55
  • @A.Cedano hola, en el post inclui el codigo que tengo actualmente, de hecho tenia una linea en el select para mostrar por default: var opciones = '<option value="" disabled="disabled">--Series Asignadas--</option>'; pero aun asi tengo el problema Commented el 3 ago. 2021 a las 22:33
  • Supongo que este es el option que aparece por defecto: <option value="" disabled="disabled">--Series Asignadas--</option> cuando cargas la página. ¿Dices entonces que aparte de ese, cuando seleccionas otro option no hace nada. Indica claramente en la pregunta cuál es el código Javascript que escucha los cambios. Sería bueno también que coloques el html que genera el select para verificarlo. Ese select puede tener por ejemplo clases css que se manejen también por Javascript. Es necesario ver todo el contexto que envuelve el problema para poder ayudarte mejor.
    – A. Cedano
    Commented el 3 ago. 2021 a las 22:53
  • si, como se ve en la imagen el select por default muestra "Series Asignadas" y abajo los valores que se cargan desde la bd, pero al seleccionar el elemento desde el select no hace nada (estoy probando al menos que me imprima algo en consola para ver si llego), en este ejemplo tengo un solo elemento, cuando tengo por ejemplo 2 elementos en el select, seleccionando el segundo por ejemplo si funciona (el problema se produce con el primer elemento al parecer) Commented el 3 ago. 2021 a las 23:10
  • Pero es lo que te decía más arriba, si tienes dos option el change no funcionará con el primero porque es el primero, no hay cambio. En la pregunta debes poner un Ejemplo Mínimo y Verificable si quieres que te ayudemos, el select que has puesto no tiene option.
    – A. Cedano
    Commented el 4 ago. 2021 a las 2:50

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.