Show/Hide with Select

This isn't complicated, but I forgot how I did it before, so I'm going to write it down this time.

The Case:
I have a form with a select box, if you select Yes, you get one set of options, and No gets another. The two pieces are in divs, both with style=display:none. The dropdown is a required field and it starts as a blank box.

The JavaScript:

function showHide(show, hide){
  document.getElementById(show).style.display='block';
  document.getElementById(hide).style.display='none';
}

The HTML:

<select id="yesno">
 <option>  </option>
 <option value="yes" onclick="showHide('pickYes', 'pickNo')">Yes</option>
 <option value="no" onclick="showHide('pickNo', 'pickYes')">No</option>
</select>
<div id="pickYes" style="display:none">
 I display if Yes is selected
</div>
<div id="pickNo" style="display:none">
 I display if No is selected
</div>

:UPDATE:
Oh man, I totally lied. That only works in Firefox. onclick isn't an option javascript event. Oops. Here's the real solution

Javascript:

function showHide(){
 var sel = document.getElementById('yesno').value;
 if (sel == 'yes'){
   document.getElementById('pickYes').style.display='block';
   document.getElementById('pickNo').style.display='none';
 }
 else if (sel == 'no'){ 
   document.getElementById('pickNo').style.display='block';
   document.getElementById('pickYes').style.display='none';
 }else{ 
   document.getElementById('pickYes').style.display='none';
   document.getElementById('pickNo').style.display='none';
 }
}

HTML:

<select id="yesno" onchange="showHide()">
<option>  </option>
<option value="yes" onclick="showHide('pickYes', 'pickNo')">Yes</option>
<option value="no" onclick="showHide('pickNo', 'pickYes')">No</option>
</select>

So yeah... this isn't as pretty, but it works in other browsers.

ANOTHER UPDATE (from months in the future):

This whole ugliness can be completely avoided by just using JQuery :)