Tengo esta función que dependiendo del valor que ponga que en mi select "duracionTurno" muestra unas cosas u otras. Todo me funciona a la perfección, el único problema es que en uno de los if he puesto que si tiene el valor '16:00' horas seleccionado, seleccione el valor '10:00' en el select 'selectTurno' y esconda el valor "16:00". El valor "16:00" me lo esconde todas las veces que cambio el valor de el select "duraciónTurno", pero el seleccionar el valor "10:00" solo me funciona una única vez. Yo quiero que lo haga siempre.
Archivo JavaScript
$("#duracionTurno").change(function(){
var elegirActividades = $("#selectActividad").val();
var elegirDuraciones = $("#selectDuracion").val();
var selectTurno = $('#selectTurno').val();
if(elegirActividades == 18 && elegirDuraciones == 'Avanzado - 48 horas' || elegirActividades == 18 && elegirDuraciones == 'Extremo - 10 días'){
$('#otrasActividades').show();
$('.sw-btn-next').addClass("disabled").attr("disabled", true);
}else if(elegirActividades == 18 && elegirDuraciones == 'Intermedio - 8 horas'){
$("#selectTurno option[value='16:00']").hide();
$("#selectTurno option[value='10:00']").attr("selected",true);
$('#otrasActividades').hide();
$('.sw-btn-next').removeClass("disabled").attr("disabled", false);
}else if(elegirActividades == 18 && elegirDuraciones == 'Iniciación - 4 horas'){
$("#selectTurno option[value='16:00']").show();
$('#otrasActividades').hide();
$('.sw-btn-next').removeClass("disabled").attr("disabled", false);
}else{
$('#otrasActividades').hide();
$('.sw-btn-next').removeClass("disabled").attr("disabled", false);
}
});
Archivo HTML
<div class="form-group" id="elegirActividad">
<select id="selectActividad" class="form-control marginRight">
<option value="vacio" disabled selected>Selecciona una actividad</option>
<option value="2">Paintball</option>
<option value="18">Supervivencia</option>
</select>
</div>
<div id="duracionTurno">
<div class="form-group" id="elegirDuracion">
<label for="mainActividad">Selecciona una duración</label>
<select id="selectDuracion" class="form-control marginRight">
<option value="vacio" disabled selected>Selecciona una duración</option>
<option value="Iniciación - 4 horas">Iniciación - 4 horas</option>
<option value="Intermedio - 8 horas">Intermedio - 8 horas</option>
<option value="Avanzado - 48 horas">Avanzado - 48 horas</option>
<option value="Extremo - 10 días">Iniciación - 4 horas</option>
</select>
</div>
<div class="form-group" id="elegirTurno">
<label for="mainActividad">Selecciona un turno</label>
<select id="selectTurno" class="form-control marginRight">
<option value="vacio" disabled selected>Selecciona un turno</option>
<optgroup label="Turnos de mañana">
<option value="10:00">10:00</option>
<optgroup label="Turnos de tarde">
<option value="16:00">16:00</option>
</select>
</div>
</div>
10:00
.selectDuracion
y tú quieres después de ese cambio que ocurra algo. ¿He entendido bien? Eso no puede ocurrir, porque en tu código jQuery tú no estás escuchando los eventoson change
del selectselectDuracion
. El único cambio que tú controlas en el código es el deduracionTurno