Firstly, download the jQuery library from the link link and add this file to the head of your site eg:
<head>
<script type="text/javascript" src="path/seu arquivo.js"></script>
</head>
Create an empty file with the extension .js ex: search.js to place the code that will execute AJAX.
HTML:
<select name="filter" id="filter">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
Create a method in a php class in case if you are using a framework, search and return the data in JSON format. If you are using a site with structured code, create a file, for example, filter.php.
In the file search.js you can use the change event that is executed after the user selects the filter ex:
$(function(){
$('#filter').change(function(){
var $filtro = $(this);
$.ajax({
url: 'filtro.php',
type: 'get',
data:{
ano: $filtro.val()
},
success: function(response){
alert(response); // retorno do php
},
error: function(xhr){
alert(xhr.responseText);
}
});
});
});
Following this guidance in the php file, you must capitalize the request to query it as follows:
$filtro = $_REQUEST['ano']; ou $_GET['ano'];