Making a form visible based on specific selection in a drop down field

I have a dynamically populated drop down field . Depending on users selection from that drop down field i 开发者_Python百科want to make additional fields in a form visible on the same page .I'm a newbie to ui development so i dont know much about jquery n stuff . is it possible to do it in plain javascript? Any help is appreciated. Thanks, Arun

Try this:

The HTML:

<select id="sel" onchange="selectChanged"><option>1</option><option>2</option></select>
<div id="div0" style="display:none">This is div 1</div>
<div id="div1" style="display:none">This is div 2</div>

The javascript:

function selectChanged(){
  activeOption = document.getElementById("sel").selectedIndex;
  document.getElementById("div"+activeOption).style.display = "block";
}

Note that the selected index is 0 based.

Adding code since I couldn't find any meaningful result on Google.

Assuming that every additional field has a class of .extra, and it's ID is equal to the option value:

$('#myselect').change(function(){

  var targetField = '#' + $(this).val()

  // hide all other fields
  $('.extra').hide()
  // show the relevant one
  $(targetField).show()

})