[jQuery] ajax submit a form (when a select box changes) and load the result in the same page

[supratim]

hi all!
greetings to everyone!
I am sorry if I missed the solution
of this problem given here already
but I searched for quite some time.
here is my problem


I have written a form with only a select box
which, when changed, should submit
its form and load the response from the
server in the same page under a specific
<div></div> so that the user doesn't have to navigate
away from that page when he wants to
change that select box again.

So far I am trying with a submit button
and when I click on submit after changing the
select box, it works.

code::

 <script language='javascript'>

        $(document).ready(function() {

            var options = {
                target:        '#content',   // target element(s) to
be updated with server response
                beforeSubmit:  function() { document.body.style.cursor
= 'wait'; },  // pre-submit callback
                success:       function() { document.body.style.cursor
= 'default'; }  // post-submit callback

            };

            // bind to the form's submit event
            $('form').submit(function() {
                $(this).ajaxSubmit(options);
                return false;
            });
        });
    </script>



<div id='content' style='border:1px solid black'>

<form id="publicationform" id="publicationform" action="show.jsp"
method="POST">
<select name="publication" id="pubitemlist" >
......
<input type="submit" value="Select"/>
</form>

how can I make it work without the submit button?

(I have tried <select name="publication" id="pubitemlist"
onChange="this.form.submit();">
which causes it to load a new page
what I want is to load the response (page) in the <div> specified in
AJAX fashion!

Thanks in advance!
Regards,
Supratim.