Drop-Down Filter SPservices on SharePoint

Hi i was hoping if could get some help here with an spservices and javascript problem. i very new to this and would very much like to learn while solving a problem. i have a list (tools) with about six images with fields (region and state). my design is shown in the attached image, which is how i want it to look. The two boxes at the top i want to be be drop-down filters.(Region and State).if any combination of region and state is selected, i want the images related to display while the ones not related to be hidden.

so i would like help with how i can start. i am abit lost to how i can incorporate the drop-down filter bit. Any help will be grand

</style>
#Data{
margin-bottom:20px;
margin-right:20px;

padding-right: 40px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
<div ID="ImageTable"><table><tr><td><div ID="Data"><img src="../image1.jpg"></br><div class="image1"></div><div ID="Data"><img src="../image2.jpg"></br><div class="image2"></div><table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2013.01/jquery.SPServices-2013.01.min.js" type="text/javascript">
</script> 

<script type="text/javascript">

$().SPServices({
    operation: "GetListItems",
    async: false,
    listName:"Image list",completefunc: function (xData, Status){   
//alert(xData.responseXML.xml);

$(xData.responseXML).SPFilterNode("z:row").each(function(){

if($(this).attr("ows_LinkRegion")=="Europe")
$('.image1').html(''+$(this).attr("ows_image")+'');

if($(this).attr("ows_LinkRegion")=="Asia")
$('.image1').html(''+$(this).attr("ows_image")+'');

});
}
});

</script>
<style>