javascript - Select different options at an select form and show different content -

i have form 'select' different options needed. every time clicks on option different content should appear. that's solution (it works :) ), can see on length of code, complicated on. guess easier jquery?

html

<select onchange="optioncheck()" id="options" >     <option>abc</option>     <option>xyz</option> </select>  <div id="showmorecontent1" class="hiddencontent">content1 goes here</div> <div id="showmorecontent2" class="hiddencontent">content2 goes here</div> 

js

<script>     function optioncheck() {         selectoptions = document.getelementbyid("options");          helpdiv1 = document.getelementbyid("showmorecontent");         helpdiv2 = document.getelementbyid("showmorecontent2");          if (selectoptions.options[1].selected) {             helpdiv1.classname = "visiblecontent";         } else {             helpdiv1.classname = "hiddencontent";         }         if (selectoptions.options[2].selected) {             helpdiv2.classname = "visiblecontent";         } else {             helpdiv2.classname = "hiddencontent";             }         } </script> 

css

<style>     .hiddencontent {display: none;}     .visiblecontent {display: block;}​ </style> 

if understand question correctly, can following in jquery same result

<select id="options" >     <option>--</option>     <option value="abc">abc</option>     <option value="xyz">xyz</option> </select>  <div id="content-abc" class="content hidden">content1 goes here</div> <div id="content-xyz" class="content hidden">content2 goes here</div>  $(document).ready(function(){     $("#options").change(function(){         $(".content").addclass("hidden");         $("#content-"+$(this).val()).removeclass("hidden");     }); }); 

http://jsfiddle.net/mg3uc/