soy nuevo con AJAX, la verdad ya busque, encontre varios recursos, tutoriales y demas lo que trato de hacer es:
De un primer select, selecciono un dato y deberia aparecer otro SELECT con una lista de mi base de datos por peticion POST, lo intento hacer con AJAX para no recargar la pagina, pero al momento de traerme los datos, se duplica el contenido, ya hice varios intentos y siempre es lo mismo :(.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="" method="POST" id="formulario">
<label>Año:</label><br>
<select name="anio" id="anio">
<option value="0">SELECCIONA UN AÑO</option>
<?php
$resultado = Sistema::obtenerAños();
foreach ($resultado as $res) {
echo "<option value='".$res['anio']."'>".$res['anio']."</option>";
}
?>
</select>
<br>
<select name="marcas" id="marcas" disabled="disabled">
<option value="0">SELECCIONA UNA MARCA</option>
</select>
</form>
<div id="respuesta">
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('#anio').change(function() {
var año = $(this).val();
if (año != 0) {
$.ajax({
url: "sistema_diagramas.php",
type: "POST",
data: {anio:año},
}).done(function(r){
$('#respuesta').html(r);
$('#marcas').prop("disabled", false);
})
}
});
});
</script>
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$año = $_POST['anio'];
echo $año;
}
Es este ultimo, que viene siendo el codigo php, lo deje asi para que me mostrara en el div "respuesta" el año que esta obteniendo, si lo muestra, pero el primer select se duplica.