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...
BD: escuela con 2 tablas relacionadas:
- primaria (id_estudiante int(11), nombre varchar(50), apellido varchar(50), sexo varchar(1), grado varchar(20), seccion varchar(1))
- 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';
}
}