title: Submit ajax request form on select change wordpress
body: <p>I have a select option to filter posts by category. On select change I want the ajax request to be sent and load the posts of the category selected. I currently have this working using a submit button, but I need this to work on select option change, but I cannot get it to work just using a select. </p>
  
  <p>Below is the script and form i'm working with that works on submit using a button. </p>
  
  <pre><code>&lt;form action="&lt;?php echo site_url(); ?&gt;/wp-admin/admin-ajax.php" method="POST" id="filter" class="ghost-select"&gt;
              &lt;?php
                  if( $terms = get_terms( 'category', 'orderby=name' ) ) :
                      echo '&lt;select id="categoryfilter" name="categoryfilter"&gt;&lt;option&gt;Select category...&lt;/option&gt;';
                      foreach ( $terms as $term ) :
                          echo '&lt;option value="' . $term-&gt;term_id . '"&gt;' . $term-&gt;name . '&lt;/option&gt;';
                      endforeach;
                      echo '&lt;/select&gt;';
                  endif;
              ?&gt;
              &lt;!-- &lt;button&gt;Apply filter&lt;/button&gt; --&gt;
              &lt;input type="hidden" name="action" value="myfilter"&gt;
  
            &lt;!-- onchange="this.form.submit();" --&gt;
  
          &lt;/form&gt;
  
  
  $('#filter').submit(function(){
    var filter = $('#filter');
  
  $.ajax({
      url:filter.attr('action'), // ajax
      data:filter.serialize(), // form data
      type:filter.attr('method'), // POST
      beforeSend:function(xhr){
          // filter.find('button').text('Processing...'); // changing the button label
      },
      success:function(data){
          // filter.find('button').text('Apply filter'); // changing the button label back
          $('#response').html(data); // insert data
      }
  });
  return false;
  });
  });
  </code></pre>
  
  <p>I have tired changing the initial submit function to the following, but it doesn't do anything:</p>
  
  <pre><code>$('#filter select').on('change', function() {
  </code></pre>
  
  <p>I've also tried adding <code>onchange="this.form.submit();"</code> to the select itself, but this submits the form and takes you away from the page to the url of the form action so I now know this isn't the right way to go.</p>
  
  <p>I'm not sure what i'm missing so any help with this would be greatly appreciated! </p>
  
  <p>Thanks</p>