La idea es que uses la menor cantidad de javascript posible, aquí te plasmo una idea inicialmente solo se ven los primeros 6 elementos (lista[a,b,c];nombre,asunto;email;mensaje) y aunque existe el elemento #otrodato y #otromas estos no son ni requeridos, ni visibles gracias a la propiedad hidden del #contenedor-oculto que no permite su visualización.
Cuando seleccionas la opción [--c--] el #contenedor-oculto elimina su atributo hidden y quedan al descubierto los dos input «que siempre han existido». Además se le agrega atributos de required al imput#otrodato lo que no permitirá enviar el formulario hasta que se complete este campo.
Todo lo anterior gracias a la función SegunOpcion que se dispara cada vez hay un cambio en el select.
Código HTML:
<script type="text/javascript">
function SegunOpcion(opcion) {
var miDiv = document.getElementById("contendor-oculto");
var miInput = document.getElementById("otrodato");
if (opcion == "c") {
miDiv.removeAttribute("hidden");
miInput.setAttribute("required","required");
} else {
miDiv.setAttribute("hidden","hidden");
miInput.removeAttribute("required");
}
}
</script>
<form action="">
<select name="milista" id="milista" onchange="SegunOpcion(this.value);">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<input type="text" id="nombre" placeholder="Digita tu nombre" required="required"/>
<input type="text" id="asunto" placeholder="Digita tu asunto" required="required"/>
<input type="text" id="asunto2" placeholder="Describe tu asunto" required="required"/>
<input type="email" id="emamil" placeholder="Digita tu correo electronico" required="required"/>
<textarea id="msj" cols="30" rows="10" placeholder="Digita tu mensaje" required="required"></textarea>
<div id="contendor-oculto" hidden="hidden">
<input type="text" id="otrodato" placeholder="Digita el otro dato"/>
<input type="text" id="otromas" placeholder="Digita el otro dato"/>
</div>
<input type="submit" id="boton-envio" />
</form>