Select onchange

[andre___5025]

HOla amigos estoy tratando de hacer un select normal que tiene dos opciones 'Si', 'No' . Lo que quiero es que si el usuario selecciona la opcion 'Si' entonces me aparezan o se habiliten dos select mas para que siga llenando el formulario, si el usuario escoge 'No' entonces que aparezca un solo select. Creo que se hace con la funcion onchange de javascript pero no lo he sabido dominar bien.

El codigo seria algo asi:

Select de 'Si', 'No'

Código:

<select name="estudia_act_cab">
	<option value=" ">Seleccione...</option> 
	<option value="Si">Si</option>
	<option value="No">No</option>
	</select>

Si escoge 'Si' entonces que muestre estos:

Código PHP:

 Entidad educativa:      
            <select name='cod_program_est'> 
                <option value="0"selected></option> 
                <? 
                $sql3 = "select * from program_est"; 
                $result3 = mysql_query ($sql3, $link); 
                while ($row = mysql_fetch_array ($result3)) { 
                $mcodpr = $row['cod_program_est']; 
                $mprog = $row['dtalle_program_est']; 
                if ($pro == $mcodas) 
                echo "<option value= '$mcodpr'> $mprog </option>"; 
                else 
                echo "<option value= '$mcodpr'> $mprog</option>"; 
                } 
                echo "</option>"; 
                ?> 
                </select></td> 
 
Tipo de institucion actual: 
                <select name='cod_ins'> 
                <option value="0"selected></option> 
                <? 
                $sql3 = "select * from institucion"; 
                $result3 = mysql_query ($sql3, $link); 
                while ($row = mysql_fetch_array ($result3)) { 
                $mcodpr = $row['cod_ins']; 
                $mprog = $row['dtalle_ins']; 
                if ($pro == $mcodas) 
                echo "<option value= '$mcodpr'> $mprog </option>"; 
                else 
                echo "<option value= '$mcodpr'> $mprog</option>"; 
                } 
                echo "</option>"; 
                ?> 
                </select>  

Si escoge 'No'

Código PHP:

 Ultimo año aprobado:                 
                <select name='cod_anio_aprob'> 
                <option value="0"selected></option> 
                <? 
                $sql3 = "select * from anio_aprob"; 
                $result3 = mysql_query ($sql3, $link); 
                while ($row = mysql_fetch_array ($result3)) { 
                $mcodpr = $row['cod_anio_aprob']; 
                $mprog = $row['dtalle_anio_aprob']; 
                if ($pro == $mcodas) 
                echo "<option value= '$mcodpr'> $mprog </option>"; 
                else 
                echo "<option value= '$mcodpr'> $mprog</option>"; 
                } 
                echo "</option>"; 
                ?> 
                </select>  

[Alexis88]

Trabaja con el evento change y en la función controladora, tomas el valor seleccionado del select y realizas una determinada acción en base a dicho valor. Un ejemplo:

En el documento HTML

Código HTML:

<select id = "seleccion">
  <option>SELECCIONE UNO</option>
  <option value = 1>SI</option>
  <option value = 2>NO</option>
</select>
  
<select class = "par">
  <option>Par 1</option>
</select>
  
<select class = "par">
  <option>Par 2</option>
</select>
  
<select id = "impar">
  <option>Impar</option>
</select>
 

En la hoja de estilos (para ocultar los combos desde el inicio)

Código CSS:

.par, #impar {
  display: none;
}
 

En el documento JavaScript

Código Javascript:

var seleccion = document.querySelector("#seleccion"),
    pares = document.getElementsByClassName("par"),
    impar = document.getElementById("impar");
 
seleccion.addEventListener("change", function(){
  var valorElegido = this.value;
  
  if (valorElegido == 1) {
    impar.style.display = "none";
    
    for (var i in pares) {
      pares[i].style.display = "block";
    }
  }
  else if (valorElegido == 2) {
    impar.style.display = "block";
    
    for (var j in pares) {
      pares[j].style.display = "none";
    }
  }
  else {
    impar.style.display = "none";
    
    for (var k in pares) {
      pares[k].style.display = "none";
    }
  }
}, false);
 

Como verás, dependiendo de la selección que se realice, o bien se muestran los dos primeros combos y el tercero se oculta o viceversa, además, si selecciono la opción por defecto, se ocultan todos.

Saludos