Difficulty loading MySQL data from select box using jQuery ajax.

I am trying to load mysql data from my database from a html select box. Here is the jquery function I am currently using, but it doesn't seem to update my results based on the selection.

$(function(){
            $('#countries').keyup(function(){

            var inpval=$('#countries').val();

            $.ajax({
                type: 'POST',
                data: ({countries : inpval}),
                url: 'data.php',
                success: function(data) {
                     $('#show_results').html(data);
          }
        });
    });
});

and here is the html code for my select box

<select id="countries">
                    <option value="canada" id="canada">canada</option>
                    <option value="america" id="america">america</option>
                    <option value="india" id="india">india</option>
                    <option value="uk" id="uk">uk</option>
                    <option value="germany" id="germany">germany</option>
                </select>

I learned how to use jquery ajax to load data from mysql database from Here, and it actually works very well for data typed into regular textboxes, however, it doesn't seem to work as well with select boxes. Any help would greatly appreciated.

Thanks.