First download the jQuery library at the link https://jquery.com/download/ and make the inclusion of this file in the head of your site ex:
<head>
<script type="text/javascript" src="path/seu arquivo.js"></script>
</head>
Create an empty file with extension . js ex: search.js to put 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 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 search.js file you can use the change event that runs 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 orientation in the php file, you should capitulate the request to make the query as follows:
$filtro = $_REQUEST['ano']; ou $_GET['ano'];
Post what you’ve tried to do.
– Diego
Give us a starting point.
– Ruggi