First you need to bind the change
event of the select
to send the name to a function to search the file, then append the file/s to the DOM:
Javascript (Ajax)
// Every time a category is selected we request the files
$('#category').on('change', function() {
// If we have an element with images loaded, lets delete it
var searchResult = $("#search-result").empty();
// Now we serialize the form data, add an id to the form
var searchBrand = $('#gender').find('option:selected').text();
var searchModel = $('#category').find('option:selected').text();
var fileName = searchBrand + '.' + searchModel + '.jpg';
var searchData = { filename: fileName }
// Now we create the ajax request with the form data
var request = $.getJSON('search_images.php', searchData);
// If the request success we show the images
request.done(function(data) {
// For each image found we add a new image to the DOM
$.each(data, function(index, image_uri) {
// First let's create the image element
var img = $("<img>", {
"class": "result-image",
"src": image_uri
});
// Then we append it to the DOM
searchResult.append( img );
});
});
// If the search fails, we notify that no results were found
request.fails(function() {
alert('No results found');
});
});
PHP (search_images.php)
<?
// Get the file name
$filename = $_GET['filename'];
// Find all the images
$images = glob("images/file/path/*_{$filename}");
// Return the images as json
echo json_encode($images);