2

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>

1 respuesta 1

1

En ésta condición if decimos que depende al semestre que seleccionemos, se irán removiendo el disabled para los select. Ahora debemos acceder a los valores del option del primer select y únicamente los 3 select de la derecha se irán deshabilitando cuando éstos valores del option sean menores a "semestre 5", entonces debemos hacer una condición else para cambiar los valores y luego seleccionarlos una vez esto ocurra:

for (const control of disabledControls) {
    control.setAttribute('disabled', 'disabled')
    if (toEnable[selected].includes(control)) {
        control.removeAttribute('disabled')
    } else {
        control.options.item(0).selected = 'selected';
    }
}

Tu código final resultaría así:

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')
        } else {
            control.options.item(0).selected = 'selected';
        }
    }
}
<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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.