title: Prevent page from reloading after onchange a select menu
body: <p>I apologize if this is a very simple question, however I am not able to find any answers or don't know what I am doing wrong here.Also I am new to <code>ajax</code> and <code>jquery</code>. Thanks for helping in advance!</p>
  
  <p>I have a select menu which I want to submit to the page on change I have the following:</p>
  
  <pre><code>&lt;from action="" method="post"&gt;
  &lt;select name="option"&gt;
  &lt;option value="a"&gt;a &lt;/option&gt;
  &lt;option value"b"&gt;b &lt;/option&gt;
  &lt;option value"c"&gt;c&lt;/option&gt;
  &lt;/select&gt;&lt;/form&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;script type="text/javascript" &gt;
  $('#option').change, (function(e)  
  { 
     e.preventDefault();
     $.ajax({
          type: 'post',
          url: "",
          data: $("form.option").serialize(),
          success: function() {     
          }
      });
      return false;
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>and to check if it has submitted</p>
  
  <pre><code>&lt;?php
  if (isset($_POST['option'])) {
      echo '&lt;br /&gt;The ' . $_POST['option'] . ' submit button was pressed&lt;br /&gt;';
  }
  ?&gt;
  </code></pre>
  
  <p>The form is submitted fine, however the page is still reloading on change, is there a way to stop the reloading of the page?
  Any help would be appreciated!</p>