Getting a default value from dropdown and display a table - php

Question

I am trying to display a HTML table in my index.php page with user registration data which process in table.php page. I am sending a value from a dropdown to the server for processing the data. These everything working for me. But my problem is when my index page load it is not display my table. If I need to display the table I want to select a value from the dropdown.
So anybody tell me how can I make a default value for dropdown (example 05) to display table when page is always loading.
This is my Jquery :
$('#filter-value').change(function(){
var filterValue = $(this).val();
//console.log(filterValue);
$.ajax({
type: 'post',
url: 'table.php',
dataType: 'html',
data: {filter: filterValue},
success:function(data){
$('#response').html(data);
//alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
},
complete: function(){
//alert('update success');
}
});
});
This is HTML
<div id="manage_user">
<form action="" method="">
<div id="response"></div>
<button id="FormSubmit">Add New User</button>
</form>
</div>
<br />
<div style="margin: 0 20px 20px;">
<form method="post" action="">
<select id="filter-value" name="filter">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</form>
</div>
Thank you.

Answer 1

The easiest way to do this without rewriting your code would be to change the value of the drop down and then trigger the change event so that the your existing event handler gets called when the DOM is ready. Something like:
$(document).ready(function() {
$('#filter-value').val(5).change();
});