Filter posts by their post-type with dropdown menu - ajax

Question

I want to filter posts by their post-type.
therefore I have created a dropdown menu where I can select one or multiple post-types.
My question now is: How do I get functionality for my dropdown, because I dont't know how to corespond with the database when the element is in the frontend.
This is my Dropdown-Menu

Answer 1

Using ajax you can filter post.
This is my code for filter post by category (filter post by multiple category selection)
ajax code
<script type="text/javascript">
$('.categorytag').click(function(){
var cokeValue = //you need to pass array of post category id
var data = {
action: 'get_partiblog',
foo: cokeValue
};
$.post('/wp-admin/admin-ajax.php',data,function(response){
$('#filteredblog').html(response);
});
})
</script>
php code
<?php
add_action('wp_ajax_get_partiblog','Getblogcatwise');
add_action('wp_ajax_nopriv_get_partiblog','Getblogcatwise');
function Getblogcatwise(){
$catids = $_POST['foo'];
foreach($catids as $catid){
$args = array(
'post_type'=> 'post',
'orderby' => 'ID',
'category_name' => $catid,
'post_status' => 'publish',
'order' => 'DESC',
'posts_per_page' =>-1 // this will retrive all the post that is published
);
$result = new WP_Query( $args );
if ( $result-> have_posts() ) :
while ( $result->have_posts() ) : $result->the_post();
$link = get_permalink();
echo '<a href="'.$link.'" target="_blank">';
echo '<div class="service-wrapper" style="border:1px solid #367bae;">';
/* if ( has_post_thumbnail() ){
echo '<div><img src="'.the_post_thumbnail("thumbnail").'" alt="Image Missing" rel="lightbox"></div>';
}else{
echo '<div><img src="https://uae.microless.com/cdn/no_image.jpg" alt="" rel="lightbox"></div>';
}*/
$title= get_the_title();
echo '<center><div style="color:#367bae;font-size:22px;font-weight:700;position: relative;margin-top: 25%;padding:5%;">'.$title.'</div></center>';
echo '<div class="service-wrapper-inner">';
//$title= get_the_title();
//echo '<h3>'.$title.'</h3>';
echo '<center><i style="font-size:18px;color:#fff;-webkit-transition: 1s;-moz-transition: 1s;-ms-transition: 1s;-o-transition: 1s; transition: 1s;" class="fa fa-bars"></i></center>';
$excerpt= the_excerpt();
echo '<div class="description"><p>'.$excerpt.'</p></div></div></div></a>';
endwhile;
endif; wp_reset_postdata();
}
}
?>