Problem with change event on a select box

Problem with change event on a select box

Hi all, I'm currently having a problem with getting a change event to fire when changing the values of a select box. I've put together the sample code below to show what I mean.

  1. <html>
  2.     <head>
  3.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4.         <script type="text/javascript">
  5.             $(function() {
  6.                 $("select[name='test1']").change(function() {
  7.                     alert($(this).attr("value"));
  8.                     });
  9.                 });
  10.            
  11.             function changeValues() {
  12.                 $("select[name='test1']").attr("value","2");
  13.                 }
  14.         </script>
  15.     </head>
  16.     <body>
  17.         <div>
  18.             <select name="test1">
  19.                 <option>Please Select</option>
  20.                 <option value="1">One</option>
  21.                 <option value="2">Two</option>
  22.                 <option value="3">Three</option>
  23.             </select>
  24.         </div>
  25.         <br />
  26.         <div>
  27.             <button onclick="changeValues();">Change Value</button>
  28.         </div>
  29.     </body>
  30. </html>
Basically, when you manually change the value of the select box the change event fires but if you press the button to change the value then no event fires.

I have a feeling I'm missing something really obvious but at the moment I just can't see what's wrong. Can anybody help with this?

Thanks