Filtering option send to ajax request as data

Filtering option send to ajax request as data

I wanted to combine paginate and filtering by options using jquery ajax request.

this form is for filtering purpose:
  1. <form id="formfilter" method="post" enctype="multipart/form-data">
  2. <div> Genre:<br /> 
  3. <select name="filterGenre" id="filterGenre">
  4. <option value="all" selected="selected">All</option>
  5. <option value='1'>Education</option>
  6. <option value='2'>Entertainment</option>
  7. <option value='3'>Documentary</option>
  8. <option value='4'>Short Content</option>
  9. <option value='5'>Animation</option>
  10. </select>
  11. </div>
  12. </form>

Here is ajax request, how can I pass options value which is selected from above form to server side? I wanted 'txt_filter' be able to send to 'filterGenre' dynamically base on filter selection.
data : { filterGenre : txt_filter } 


  1. function loadData(page){ 
  2. $.ajax({ 
  3.       type: "POST", 
  4.       url: "ajax_network_programs_shortlist.php",
  5.       data: { page: page, filterGenre: txt_filter },
  6.       success: function(msg){ 
  7.             $("#inner-main_content3").ajaxComplete(function(event, request, settings){ 
  8.             $("#inner-main_content3").html(msg); 
  9.       }); } }); }

please advise, big thanks.