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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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