title: JQuery pass selected value to Ajax parameter
body: <p>I used <a href="http://www.9lessons.info/2010/10/pagination-with-jquery-php-ajax-and.html" rel="nofollow">this pagination script</a> and wanted to implemented filtering by options using jq's ajax request, data will filtering with selected value when user trigger it, the page will load <code>all</code> data by default when first loaded.</p>
  
  <p>I tried to pass <code>txt_filter</code> to ajax's parameters object that is ready send to PHP to processing data, but below script is not working when I select filtering options. </p>
  
  <p>How could <code>txt_filter</code> be pass to function loadData when user select it?</p>
  
  <pre><code>// Filtering Options
  
  &lt;form id="formfilter" method="post" enctype="multipart/form-data"&gt;
     &lt;div style="padding-bottom:6px;"&gt;
         Genre:&lt;br /&gt;
         &lt;select id="filterGenre"&gt;
          &lt;option value="all" selected="selected"&gt;All&lt;/option&gt;
          &lt;option value='1'&gt;Education&lt;/option&gt;
          &lt;option value='2'&gt;Entertainment&lt;/option&gt;
          &lt;option value='3'&gt;Documentary&lt;/option&gt;
         &lt;/select&gt;
     &lt;/div&gt;
  &lt;/form&gt;
  
  
  // Get filtering value stored in variable
  var txt_filter;
  $("#filterGenre").change(function(){
      txt_filter = $('#filterGenre').val();
      //alert(txt_filter);
  });
  
  
  // Pass filtering value to filterGenre
  function loadData(page){
      $.ajax({
          type: "POST",
          url: "ajax_network_programs.php",
          data: { page: page, filterGenre: txt_filter },
          success: function(msg){
              $("#inner-main_content3").ajaxComplete(function(event, request, settings){
                  $("#inner-main_content3").html(msg);
              });
          }
      });
  }
  loadData(1);  // For first time page load default results
    .
    .
    .
  //blah blah codes not relevant...
  </code></pre>
  
  <p>Thanks.</p>