Tengo un código que me da varias opciones de las cuales se desbloquean si seleccionas en el primer "option" una opción exacta, al seleccionar el semestre 1 desbloquea la opción de "selecciona paraescolar" y así de manera continua hasta semestre 5.
pero al desbloquear todo y elegir una de cada opción menor a la de "semestre 5" lo que hayas elegido se queda como esta aunque se haya bloqueado, y quiero que en el caso de que se vuelvan a bloquear regresen a la opción por defecto ah antes de elegir
const paraescolar = document.getElementById('paraescolar')
const capacitacion = document.getElementById('capacitacion')
const propedeutica = document.getElementById('propedeutica')
const semestre = document.getElementById('semestre')
const semestre_onChange = (event) => {
const selected = event.value;
const disabledControls = [ paraescolar, capacitacion, propedeutica ]
const toEnable = {
0: [ semestre ],
1: [ paraescolar ],
2: [ paraescolar, capacitacion ],
3: [ paraescolar, capacitacion, propedeutica ]
}
for(const control of disabledControls) {
control.setAttribute('disabled', 'disabled')
if (toEnable[selected].includes(control)) {
control.removeAttribute('disabled')
}
}
}
<select class="controls" id="semestre" name="semestre" onchange="semestre_onChange(this)">
<option class="controls" value="0" selected="selected">- Selecione El Semestre -</option>
<option value="1">Semestre 1</option>
<option value="2">Semestre 3</option>
<option value="3">Semestre 5</option>
</select>
<select class="controls" id="paraescolar" name="paraescolar" disabled>
<option class="controls" value="0" selected="selected">- Selecione El Paraescolar -</option>
<option value="1">Educacion Fisica</option>
<option value="2">Danza</option>
</select>
<select class="controls" id="capacitacion" name="capacitacion" disabled>
<option class="controls" value="0" selected="selected">- Selecione La Capacitacion -</option>
<option value="1">Contabilidad</option>
<option value="2">Informatica</option>
</select>
<select class="controls" id="propedeutica" name="propedeutica" disabled>
<option class="controls" value="0" selected="selected">- Selecione El Area Propedeutica -</option>
<option value="1">Fisico-Matematico</option>
<option value="2">Economico-Administrativo</option>
</select>