How to hidden fields based on selection

[akshayphp]

I want to know that "how to show hidden fields when a user selects a particular option in the html form"
I want the fields to be hidden first,then when the users selects:

Option A- Particulars fields which have I will create for this option must be displayed.
If
Option B-Particular field which I will create for this option must be displayed.

I want this code to run as soon as the user selects a option.Not on a button click

[stbuchok]

Something like this (I haven't tested):

items.onchange = function(){

    var element = document.getElementById('elementId');

    //if you have a lot of options you might want to use switch instead.
    if(this.options[this.selectedIndex].value === 'Option A'){
        element.style.display = 'inline';//could be any of the display values.
    }
}

[svilla]

I like the jquery library because your can change you code to be easier to read and look like this:

$('#elementId).change( function() {
if ($('input:radio[name=bar]:checked').val() == 'Option A') {
  $('#element2).show();
}
})

I think you have use a uniqueID for each radio button while you can use the same name to create a radio button group. So the above code would probably look more like:

$('input:radio[name=foo]').change( function() {
if ($('input:radio[name=foo]:checked').val() == 'Option A') {
  $('#element2).show();
}
})

Since you probably don't want this to run until the document is fully loaded It should look more like:

$(function() {
  $('input:radio[name=foo]').change( function() {
  if ($('input:radio[name=foo]:checked').val() == 'Option A') {
    $('#element2).show();
  }
  })
})