I have a code that gives me several options which are unlocked if you select an exact option in the first "option", selecting semester 1 unlocks the "select para-school" option and so on continuously until semester 5.
but when unlocking everything and choosing one of each option less than "semester 5" what you have chosen remains as it is even if it has been blocked, and I want that in the event that they are blocked again they return to the default option ah before choosing
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>
In this condition
if
we say that it depends on the semester that we select, the will be removeddisabled
for theselect
. Now we must access the values ofoption
the first oneselect
and only the 3select
on the right will be disabled when these values of theoption
are less than "semester 5" , then we must make a conditionelse
to change the values and then select them once this happens:Your final code would look like this: