change onclick buttons to onchange from a select

[tryingtolearn]

I am trying to be able to change the font-size and font of text in  a div

 

 

Right now I am using individual buttons for each like this (This works but...)

 

<script type="text/javascript"> 
  function fs(n)  { 
    document.getElementById('C').style.fontSize = n 
  } 
  function fn(n)  { 
    document.getElementById('C').style.fontFamily = n 
  } 
  
  </script> 
  <div style="font-family: arial, helvetica, sans-serif; color: #336699;" id="C">Text</div> 
  
  <input type="button" onClick="fs('12px')" value="12px"> 
  <input type="button" onClick="fs('14px')" value="14px"> 
  <input type="button" onClick="fs('18px')" value="18px"> 
  <input type="button" onClick="fs('24px')" value="24px"> 
  <input type="button" onClick="fs('36px')" value="36px"> 
  <input type="button" onClick="fs('48px')" value="48px"> 
  <input type="button" onClick="fs('60px')" value="60px"> 
  <input type="button" onClick="fs('72px')" value="72px">
  
  <input type="button" onClick="fn('arial')" value="arial"> 
  <input type="button" onClick="fn('tahoma')" value="tahoma"> 
  <input type="button" onClick="fn('times new roman')" value="times new roman"> 
  

 

But Id rather use two dropdown boxes like

 

<select name="fontSize"">

<option value="12px">12px</option>
<option value="14px">14px</option>
<option value="22px">22px</option>
<option value="36px">36px</option>
<option value="72px">72px</option>
</select>

<select name="font"">

<option value="arial">arial</option>
<option value="tahoma">tahoma</option>

</select>

 

But I cant seem to figure that out

 

Any ideas on the direction I need to be going in?

 

Thanks

[mainewoods]

try:

<select name="fontSize" onchange="fs(this.options[this.selectedIndex].text)">

you should be able to lose the 'value' clauses with the code above and just use the text between the option /option tags.

[tryingtolearn]

Worked perfect

Thank you very much.