Mostrar diferentes elementos de un formulario dependiendo de la selección del cuadro desplegable: javascript, html, formularios

Entonces tengo una página que tiene una lista desplegable y un formulario. Y lo que quiero hacer es dependiendo de la opción seleccionada en la lista desplegable que quiero ocultar y mostrar diferentes partes del formulario.

<select id="myselect>
<option id="option1">Option_1</option>
<option id="option2">Option_2</option>
<option id="option3">Option_3</option>
</select>

<form action="" method="post">
<input id="input_1" name="input_1" type="text" />
<input id="input_2" name="input_2" type="text" />
<input id="input_3" name="input_3" type="text" />
</form>

Entonces, si se selecciona Option_1, muestre input_1 y input_3, mientras oculta input_2

Respuestas

Llanura js

window.onload=function() {
document.getElementById("myselect").onchange=function() {
document.getElementById("input_2").style.display=(this.options[this.selectedIndex].value=="option1")?"none":"block";
}
document.getElementById("myselect").onchange(); //trigger
}

Logré resolver su problema agregando un atributo de "valor" a sus etiquetas de opción:

<select id="myselect">
<option id="option1" value="option1">Option_1</option>
<option id="option2" value="option2">Option_2</option>
<option id="option3" value="option3">Option_3</option>
</select>

<form action="" method="post">
<input id="input_1" name="input_1" type="text" placeholder="input_1"/>
<input id="input_2" name="input_2" type="text" placeholder="input_2"/>
<input id="input_3" name="input_3" type="text" placeholder="input_3"/>
</form>​

y usando el evento jquery .change ():

$select = $("#myselect");
$("#input_2").hide();
$("#input_3").hide();


$select.change(function(){
if($(this).val() == "option1"){
if($("#input_1").is(":hidden")){
$("#input_1").show();
}
$("#input_2").hide();
$("#input_3").hide();
}
if($(this).val() == "option2"){
if($("#input_2").is(":hidden")){
$("#input_2").show();
}
$("#input_1").hide();
$("#input_3").hide();
}
if($(this).val() == "option3"){
if($("#input_3").is(":hidden")){
$("#input_3").show();
}
$("#input_1").hide();
$("#input_2").hide();
}
});​

jsfiddle