Estimados estaría agradecido de su ayuda, estoy armando unos input select dinámicos con consultas a una base de datos mediante AJAX y PHP, los 4 select están anidados hacia la derecha, cada uno va mostrando opciones en función del otro.
Como ultimo tengo un botón que solo se habilita cuando los 4 input tienen una opción seleccionada, cuando selecciono una opción por primera vez el botón se habilita correctamente, cuando cambio la opción en el primer input los demás input quedan de forma correcta sin ninguna opción como debe ser, pero el botón sigue habilitado, debo volver a seleccionar una opción y ahí si se deshabilita, que puede estar faltándole a mi código que sigue dando ese problema
Adjunto el código PHP
<?php
include dirname(__FILE__).'/../../../logica/conexion/conexion.php';
class MostrarRepros {
public function Mostrar(){
$con = new Conexion(DB_ADMIN);
$HTML = '';
unset($marca,$modelo,$generacion,$motor);
$marca = filter_var(filter_input(INPUT_POST,'marca'),FILTER_SANITIZE_STRING);
$modelo = filter_var(filter_input(INPUT_POST,'modelo'),FILTER_SANITIZE_STRING);
$generacion = filter_var(filter_input(INPUT_POST,'generacion'),FILTER_SANITIZE_STRING);
$motor = filter_var(filter_input(INPUT_POST,'motor'),FILTER_SANITIZE_STRING);
$HTML .= ' <div class="col-2">
<select name="marca" id="marca" class="form-control custom-select">
<option value="">ELIGA SU MARCA</option>';
$marcas = $con->obtenerdatos("marca","estadisticas_repro","1 ORDER BY marca ASC",[1]);
for($m = 0;$m < count($marcas);$m++){
$fila = $marcas[$m];
if($marca == $fila['marca']){
$HTML .= ' <option value="'.$fila['marca'].'" selected>'.$fila['marca'].'</option>';
}else{
$HTML .= ' <option value="'.$fila['marca'].'">'.$fila['marca'].'</option>';
}
}
$HTML .= ' </select>
</div>
<div class="col-2">
<select name="modelo" id="modelo" class="form-control custom-select">
<option value="">ELIGA SU MODELO</option>';
$modelos = $con->obtenerdatos("modelo","estadisticas_repro","marca = ?",[$marca]);
if(count($modelos) > 0){
for($m = 0;$m < count($modelos);$m++){
$fila = $modelos[$m];
if($modelo == $fila['modelo']){
$HTML .= ' <option value="'.$fila['modelo'].'" selected>'.$fila['modelo'].'</option>';
}else{
$HTML .= ' <option value="'.$fila['modelo'].'">'.$fila['modelo'].'</option>';
}
}
}
$HTML .= ' </select>
</div>
<div class="col-2">
<select name="generacion" id="generacion" class="form-control custom-select">
<option value="">ELIGA SU GENERACIÓN</option>';
$generaciones = $con->obtenerdatos("generacion","estadisticas_repro","marca = ? and modelo = ?",[$marca,$modelo]);
if(count($generaciones) > 0){
for($g = 0;$g < count($generaciones);$g++){
$fila = $generaciones[$g];
if($generacion == $fila['generacion']){
$HTML .= ' <option value="'.$fila['generacion'].'" selected>'.$fila['generacion'].'</option>';
}else{
$HTML .= ' <option value="'.$fila['generacion'].'">'.$fila['generacion'].'</option>';
}
}
}
$HTML .= ' </select>
</div>
<div class="col-2">
<select name="motor" id="motor" class="form-control custom-select">
<option value="">ELIGA SU MOTOR</option>';
$motores = $con->obtenerdatos("motor","estadisticas_repro","marca = ? and modelo = ? and generacion = ?",[$marca,$modelo,$generacion]);
if(count($motores) > 0){
for($m = 0;$m < count($motores);$m++){
$fila = $motores[$m];
if($motor == $fila['motor']){
$HTML .= ' <option value="'.$fila['motor'].'" selected>'.$fila['motor'].'</option>';
}else{
$HTML .= ' <option value="'.$fila['motor'].'">'.$fila['motor'].'</option>';
}
}
}
$HTML .= ' </select>
</div>
<div class="col-2">';
if(!(empty($marca)) and !(empty($modelo)) and !(empty($generacion)) and !(empty($motor))){
$HTML .= ' <button type="button" class="btn btn-danger w-100" id="simular">SIMULAR REPRO</button>
<input type="hidden" name="" id="" value="">';
}else{
$HTML .= ' <button type="button" class="btn btn-danger w-100" disabled>SIMULAR REPRO</button>';
}
$HTML .= ' </div>';
return $HTML;
}
}
$banners = new MostrarRepros();
if(isset($_POST["action"])){
$html1 = $banners->Mostrar();
$data = array(
"html1" => $html1
);
echo json_encode($data);
}
?>
PETICION AJAX
$(document).ready(function(){
mostrar_opciones();
$(document).on('change','#marca',function(){
mostrar_opciones();
})
$(document).on('change','#modelo',function(){
mostrar_opciones();
})
$(document).on('change','#generacion',function(){
mostrar_opciones();
})
$(document).on('change','#motor',function(){
mostrar_opciones();
})
$(document).on('change','#simular',function(){
mostrar_opciones();
})
});
function mostrar_opciones(){
var action = 'fetch_data';
var marca = obtener_select(document.getElementById('marca'));
var modelo = obtener_select(document.getElementById('modelo'));
var generacion = obtener_select(document.getElementById('generacion'));
var motor = obtener_select(document.getElementById('motor'));
$.ajax({
url:"<?php echo $raiz;?>logica/web/acciones/mostrar_repros.php",
method: "POST",
dataType: "json",
data:{
action:action,
marca:marca,
modelo:modelo,
generacion:generacion,
motor:motor
},
success:function(data){
$('.prueba').html(data.html1);
}
});
}
function obtener_select(elemento){
var valor;
if (elemento != null) {
valor = elemento.value;
}else {
valor = null;
}
return valor;
}