title: Dynamically adding onchange function to drop down with jQuery
body: <p>I have a couple of drop down boxes with ids country1, country2, ... When the country is changed in a drop down the value of the country shoudl be displayed in an alert box.</p>
  
  <p>if I add the onchange handler for one box like this it works fine:</p>
  
  <pre><code> $('#country1') .live('change', function(e){
          var selectedCountry = e.target.options[e.target.selectedIndex].value;
          alert(selectedCountry);
   });
  </code></pre>
  
  <p>But I need to do this dynamically for all drop down boxes so I tried: </p>
  
  <pre><code>$(document).ready(function() {
    $('[id^=country]') .each(function(key,element){
      $(this).live('change', function(e){
        var selectedCountry = e.target.options[e.target.selectedIndex].value;
        alert(selectedCountry);
       });
    });               
  });
  </code></pre>
  
  <p>This doesn't work. No syntax error but just nothing happens when the seleted country is changed. I am sure that the each loop is performed a couple of times and the array contains the select boxes.</p>
  
  <p>Any idea on that?</p>
  
  <p>Thanks,
  Paul</p>