0

tengo el siguiente problema, estoy intentado editar la informacion de un usuario mediante un modal utilizando ajax, todo funciona muy bien la peticion ajax me devuelve un objeto listo para poder quemar esos datos en el html pero el problema radica en el select2 no me esta mostrando el valor a editar en el html pero cuando inspeciono el select el Id junto con el nombre si estan en dicho select, cabe destacar inicializo el select2 mediante un document ready function

Este es mi codigo html

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text"><i class="fas fa-university"></i></span>
    </div>
    <select class="form-control selectedituser" name="carrerauseredit">
        <option id="carrerauseredit"></option>
     </select>
</div>

y este es mi codigo js donde inicializo el select2 y tambien la funcion que realiza la peticion ajax

$(document).ready(function () {
$('.selectedituser').select2({
    placeholder: 'Selecione el programa de estudio del Usuario',
    theme: 'bootstrap4'
})});

y esta es la forma en que estoy tratando de quemar los datos en el select

var datoscarrera = new FormData();
        datoscarrera.append("idcarrera", respuesta["Id_carrera"]); 
        $.ajax({
            url: 'ajax/carreras.php',
            method: 'POST',
            data: datoscarrera,
            cache: false,
            contentType: false,
            processData: false,
            dataType: "json",
            success: function (respuesta1) {
                console.log(respuesta1);
                $("#carrerauseredit").val(respuesta1["Id_carrera"]);
                $("#carrerauseredit").html(respuesta1["Nombre"]);
                
            }
        });

realizado lo anterior el select me aparece completamente en blanco me lo muestra sin resultados pero al inspecionar el elemento efectivamente ahi esta la informacion que necesito mostrar en el html. introducir la descripción de la imagen aquí


realice las pruebas con las lineas de codigo proporcionadas y el resultado fue el siguiente. No logro resolver este detalle

introducir la descripción de la imagen aquí

2 respuestas 2

0

Hay una clase que dice select2-hidden-accessible y un atributo llamado aria-hidden = true, alguno de estos dos impide la visualización de lo que mandas a tu select.

Intenta poner esto después del cierre del ajax:

$(".selectedituser").toggleClass("select2-hidden-accessible");//retira la clase
$(".selectedituser").removeAttr("aria-hidden");//retira el atributo

Ya dependiendo del que sea el que lo impide, lo usas.

2
  • Los atributos aria tienen que ver con accesibilidad, aria-hidden en concreto, es para ocultar (o mostrar) un elemento de la API de accesibilidad. Por ejemplo, para que los programas que leen la pantalla, se salten ese elemento y no lo lean.
    – ArianJM
    Commented el 25 mar. 2021 a las 7:06
  • Un saludo nuevamente @valle50 te comento que retirando la clase con esta linea del codigo obtengo el efecto que mostre en la repuesta anterior en la parte superior, si retiro el atributo no tengo efecto alguno el punto es que impelemente el codigo tanto en el success del ajax como fuera del ajax y obtuve el mismo resultado, saludos Commented el 25 mar. 2021 a las 20:53
0

Para que se muestre en select2 la info cargada de la base de datos.

$("#e_Pais").val(respuesta["pais"]).trigger("change");

Inicializa select2.

$("#e_Pais").select2();

Eso me funciono a mi. Saludos y suerte.

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.