I want to display a certain div when an item is selected within a select box. So far I got the coding below which works fine in IE, but chrome is displaying the div whenever someone clicks on a random spot within the select box (thus not by selecting a value).

How can I make this work in all browsers?

1.  <script type="text/javascript"
2.                      src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
3.  
   <script type="text/javascript">
   
4. function toggleDiv(divId) {
5.      $('.complete').each(function(index) {
             if ($(this).attr("id") == divId) {
                  $(this).show(200);
             }
             else {
                  $(this).hide(600);
             }
        });
      
   }
   
   
   
   
   
   
   
   
   
6.  
   </script>
   
7. <select size=5 id='subgroep1' name='subgroep1' style="width: 150px;" onchange=" javascript:toggleDiv('complete1'); ">
   <option value='test1'>test1</option>
   <option value='test2'>test2</option>
   </select>
   
   
   
8.  <div class='complete' id='complete1' style='display:none; margin-top:10px; width:450px;background: #ererer;'>
    testing
    </div>