Display form field based on selection

I need to make a form that can display certain form inputs when another selection is selected, for example if I select gender: male, input form "blue" displays, and when gender:female input form "pink" displays.

I am assuming that Javascript/jQuery would be the best bet?

This is what I have thus far:

function showHideSchools(obj){ 
    //here we get the value of the select object 
    var curSel=obj.options[obj.开发者_StackOverflowselectedIndex].value 

    //if A, B, or no option selected, hide moreFields div 
    switch(curSel)
    {
    case '0-2':
    document.getElementById('schools').style.display="none"
      break;
    case '3-5':
    document.getElementById('schools').style.display="block" 
      break;
    case '9-11':
    document.getElementById('schools').style.display="block" 
      break;
    case '12-14':
    document.getElementById('schools').style.display="block" 
      break;
    case '15-16':
    document.getElementById('schools').style.display="block" 
      break;
    case '17-18':
    document.getElementById('schools').style.display="block" 
      break;
    case '19 and over':
    document.getElementById('schools').style.display="block" 
      break;
    default:
    document.getElementById('schools').style.display="none"
    }
}  

---

to get the value of your select box use jquery like :

$('#selectList').val();

see full example :

http://marcgrabanski.com/articles/jquery-select-list-values

according to this value

change value of form input like

$('#inputElem').val(myval);