0

Tengo un select que lleno desde la base de datos con php, al hacer click en el botón "Agregar" la opción seleccionada se muestra en una tabla y se elimina del select. Me gustaría que al hacer click en el botón "Eliminar" de la tabla, volviera a aparecer esa opción en el select, pero no se me ocurre cómo hacer eso, ya que no domino muy bien js. Espero que alguien me pueda ayudar con esto por favor...

captura

BD: escuela con 2 tablas relacionadas:

  1. primaria (id_estudiante int(11), nombre varchar(50), apellido varchar(50), sexo varchar(1), grado varchar(20), seccion varchar(1))
  2. seleccionados (id_seleccionados int(11), id_estudiante int(11), nombre varchar(50), apellido varchar(50), sexo varchar(1), grado varchar(20), seccion varchar(1))

Aquí están algunos de los datos que tengo en la BD: INSERT INTO primaria (id_estudiante, nombre, apellido, sexo, grado, seccion) VALUES (1, 'Angel', 'Mendoza', 'M', 'Primero', 'A'), (2, 'Cesar', 'Perez', 'M', 'Primero', 'B'), (3, 'Ana', 'Marcano', 'F', 'Primero', 'A'), (4, 'Andrea', 'Marcano', 'F', 'Primero', 'C'), (5, 'Andres', 'Gonzalez', 'M', 'Segundo', 'A'), (6, 'Alexander', 'Gomez', 'M', 'Segundo', 'B');

select

<select id="estudiante" name="estudiante" class="form-control" title="Seleccione un estudiante">

<option value="" selected="select" disabled>Seleccione un estudiante</option>
<?php

        require_once 'conexion.php';

        $sql = mysqli_query($mysqli, "SELECT id_estudiante, nombre, apellido FROM primaria WHERE id_estudiante NOT IN (SELECT id_estudiante FROM seleccionados)");
         while ($fila = mysqli_fetch_assoc($sql)) {
              echo '<option value="'.$fila['id_estudiante'].'">'.ucfirst($fila['nombre']).' '.ucfirst($fila['apellido']).'</option>';
          }
?>
</select> 

js

$('.btn-agregar').click(function(e){
    e.preventDefault();

    var estudiante = $('#estudiante').val();

    $.ajax({

        url: 'agregar_estudiantes.php',
        type: 'post',
        data: {estudiante:estudiante},

        success: function(response){

            if (response != 'error') {

                var info = $.parseJSON(response);
                $('#estudiantes').html(info.estudiantes);

                var estudiante = $('#estudiante').val();

                $('#estudiante').val('');
                $('#estudiante').find('option[value="'+estudiante+'"]').remove();

                $('.btn-agregar').slideUp();
            }
        },
        error: function(error){

        }
    });
       
});

function eliminar_estudiante(id_seleccionado) {
    var id_seleccionado = id_seleccionado;

    $.ajax({

        url: 'eliminar_estudiantes.php',
        type: 'post',
        data: {id_seleccionado:id_seleccionado},

        success: function(response){

            if (response != 'error') {
                var info = $.parseJSON(response);

                $('#estudiantes').html(info.estudiantes);
            } else {
                $('#estudiantes').html('');
            }
        },
        error: function(error){
        }
    });
}

eliminar_estudiante.php

if (isset($_POST['id_seleccionado'])) {
    $seleccionado = $_POST['id_seleccionado'];

    require 'conexion.php';

    $consulta = $mysqli->query("DELETE FROM seleccionados WHERE id_seleccionados = '$seleccionado'");

    $consulta_sql = $mysqli->query("SELECT * FROM seleccionados");

    $resultado = mysqli_num_rows($consulta_sql);

        $estudiantes = '';

        $array_tabla = array();

        if ($resultado > 0) {

            while ($fila = mysqli_fetch_assoc($consulta_sql)) {

                $estudiantes .= '<tr class="tr-table">
                    <th>'.$fila['nombre'].' '.$fila['apellido'].'</th>
                    <th>'.$fila['sexo'].'</th>
                    <th>'.$fila['grado'].'</th>
                    <th>'.$fila['seccion'].'</th>
                    <th>
                        <a href="#" id="eliminar" class="btn btn-danger btn-eliminar" onclick="event.preventDefault();eliminar_estudiante('.$fila['id_seleccionados'].');"> - Eliminar</a>
                    </th>                   
                </tr>';
            }

            $array_tabla['estudiantes'] = $estudiantes;

            echo json_encode($array_tabla, JSON_UNESCAPED_UNICODE);
        } else {
            echo 'error';
        }

}

2
  • Tienes varias formas de hacer esto. Con el código que veo no te puedo indicar como hacerlo, porque si veo que cuando borras la línea del select sí sabes la id del estudiante, pero no guardas en ningún sitio el nombre del mismo, de manera que para recuperarlo necesitarías acceder de nuevo a la bbdd para volver a incluir la línea en el select. Yo me decantaría por guardar la id y el nombre del estudiante como "data" en el mismo botón de borrar, de esa forma una misma función te servirá para todos los botones. Cuelga el código php/html donde salga el botón de eliminar y te diré como hacerlo.
    – DigiSoul
    el 12 abr. 2022 a las 9:10
  • Acabo de añadir al final el código donde aparece el botón eliminar
    – Leoddy
    el 12 abr. 2022 a las 14:00

1 respuesta 1

2

lo primero que tienes que hacer es guardar de alguna forma el nombre y apellidos del estudiante, pues este dato nos falta. Para ello, modifica el botón de eliminar de manera que en el evento "onclick" le pases también este dato como segunda variable.
Ahora cuando haces click a eliminar, la función eliminar_estudiante recibe dos variables, debería quedarte algo así la cabecera:

function eliminar_estudiante(id_seleccionado, nombre_estudiante) {

Ahora simplemente añade este código a esa función para que vuelva a insertar el estudiante en el select.

$('#estudiante').prepend("<option value='" + id_seleccionado + "' >" + nombre_estudiante'</option>");

Ahora tenemos ya el estudiante de nuevo en el select, pero está al principio del select y queremos que el select nos quede ordenado alfabéticamente. Para ello añadimos la siguente línea.

$("#estudiante").find("option[value='']").remove();

Con esto eliminamos la primera opción, la que pone "Seleccione un estudiante". A continuación llamamos a una función que nos ordenará el select por orden alfabético. Guárdatela porque sirve para cualquier select, solo tienes que pasarle la id del select que quieras ordenar.

OrdenarSelect("#estudiante");

Ya tenemos el select ordenado, volvemos a añadirle la primera opción.

$('#estudiante').prepend("<option value='' >Seleccione un estudiante</option>");

La seleccionamos

$('#estudiante').val('');

Y listo, ya tenemos el select ordenadito y con el estudiante de nuevo. Por último has de comprobar al llegar aquí si el select se ha "refrescado", si no lo ha hecho, dependiendo del tipo de librerías que estés utilizando hay varios métodos. Para jQuery mobile creo recordar que era así:

$("#estudiante").selectmenu("refresh", true);

Para Bootstrap:

$("#estudiante").selectpicker("refresh");

Sólo me queda la función para ordenar el select:

function OrdenarSelect(id_del_select) {
  var select_a_ordenar = $(id_del_select);
  var optionActual = select_a_ordenar.val();
  select_a_ordenar.html(select_a_ordenar.children('option').sort(function (a, b) {
return a.text === b.text ? 0 : a.text < b.text ? -1 : 1;
  })).val(optionActual);
}

Esta es la forma de añadir el estudiante si tener que volver a leer la bbdd, también puedes simplemente vaciar el select y volver a llenarlo desde la bbdd, pero tendrás que tener en cuenta los que ya no estén para no volverlos a introducir. Creo que como te lo he explicado es la opción más efectiva.

Un saludo.

3
  • Gracias por la explicación, intenté lo que dices pero me duplica uno que otro registro en el select y no entiendo el motivo :/
    – Leoddy
    el 13 abr. 2022 a las 1:59
  • @Leoddy, cuelga el código con las modificaciones que te he indicado y veremos qué estás haciendo mal.
    – DigiSoul
    el 13 abr. 2022 a las 8:19
  • El problema que tenía era en la BD, ya funciona. Gracias :D
    – Leoddy
    el 13 abr. 2022 a las 20:49

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.