Listbox > Show related div

Listbox > Show related div

I'm kinda new to Jquery and I'm having trouble with the script below. The idea is that the user selects an item from the listbox and then it's related div should popup (and hide the other 2 div's)

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
  2. function showonlyone() {
    var thechosenone = $('#number > option[selected]');
  3.      $('.newboxes').each(function(index) {
              if ($(this).attr("id") == thechosenone) {
                   $(this).show(100);
              }
              else {
                   $(this).hide(100);
              }
         });
    }
    </script>








  4. <select name="selectbox1" id="number" size=3 onchange="javascript:showonlyone();">
    <option value="newboxes1">1</option>
    <option value="newboxes2">2</option>
    <option value="newboxes3">3</option>
    </select>




  5. <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
    <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #2</div>
    <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #3</div>


I hope someone can help me out with this script..