Dynamic dependent Dropdown - Categories posts

This post guides you to how dynamically add drop down of wp posts categories, and based on the selection of category from drop down sub-categories or posts will show in another drop down.

Add Below codes (steps 1,2,3,3-1) in functions.php.

STEP 1: Registering Ajax functions

if ( ! class_exists( 'frontendAjaxDropdown' ) ):
 class frontendAjaxDropdown
 {
 /**
 * Loading WordPress hooks
 */
 function __construct()
 {
 /**
 * Add shortcode function
 */
 add_shortcode( 'ajax-dropdown', array($this, 'init_shortocde') );
 /**
 * Register ajax action
 */
 add_action( 'wp_ajax_get_subcat', array($this, 'getSubCat') );
 /**
 * Register ajax action for non loged in user
 */
 add_action('wp_ajax_nopriv_get_subcat', array($this, 'getSubCat') );
 }

STEP 2: Get categories in drop down

function init_shortocde()
 {
 wp_dropdown_categories(
 'name=main_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&show_option_none=All Categories'
 );
 ?>
 <script type="text/javascript">
 (function($){
 $("#main_cat").change(function(){
 $("#sub_cat").empty();
 $.ajax({
 type: "post",
 url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
 data: { action: 'get_subcat', cat_id: $("#main_cat option:selected").val() },
 beforeSend: function() {$("#loading").fadeIn('slow');},
 success: function(data) {
 $("#loading").fadeOut('slow');
 $("#sub_cat").append(data);
 }
 });
 });
 })(jQuery);
 </script>

<div id="loading" style="display: none;">Loading...</div>
 <div id="sub_cat"></div>
 <?php
 }

STEP 3 : To get sub-category of selected parent category

/**
 * AJAX action: Shows dropdown for selected parent
 */
 function getSubCat()
 {
 wp_dropdown_categories(
 "name=sub_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&child_of={$_POST['cat_id']}"
 );
 die();
 }
 }
endif;
new frontendAjaxDropdown();

STEP 3-1 : To get only posts of selected parent category

Note : Replace the Below code with Above one(STEP 3) to get posts.

function getSubCat()
 { 
$cat_id = $_POST['cat_id'];
$args=array(
'cat' => $cat_id,
'post_type' => 'YOUR POST TYPE',// You can set custom post type here
'post_status' => 'publish',

);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
?>
<strong>Select Products :</strong>
<select name="menu[]" class="form-control" multiple> //Remove multiple option if you don't needed
<?php
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<option value="<?php the_title() ?>" ><?php the_title(); ?> </option>
<?php
endwhile;

?>
</select>
<?php 
wp_reset_query();
?> <?php }}
 }
endif;
new frontendAjaxDropdown();

Final code : (Replace the code for posts Refer Step 3-1)

if ( ! class_exists( 'frontendAjaxDropdown' ) ):
 class frontendAjaxDropdown
 {
 /**
 * Loading WordPress hooks
 */
 function __construct()
 {
 /**
 * Add shortcode function
 */
 add_shortcode( 'ajax-dropdown', array($this, 'init_shortocde') );
 /**
 * Register ajax action
 */
 add_action( 'wp_ajax_get_subcat', array($this, 'getSubCat') );
 /**
 * Register ajax action for non loged in user
 */
 add_action('wp_ajax_nopriv_get_subcat', array($this, 'getSubCat') );
 }
 /**
 * Show parent dropdown for wordpress category and loaded necessarry javascripts
 */
 function init_shortocde()
 {
 wp_dropdown_categories(
 'name=main_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&show_option_none=All Categories'
 );
 ?>
 <script type="text/javascript">
 (function($){
 $("#main_cat").change(function(){
 $("#sub_cat").empty();
 $.ajax({
 type: "post",
 url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
 data: { action: 'get_subcat', cat_id: $("#main_cat option:selected").val() },
 beforeSend: function() {$("#loading").fadeIn('slow');},
 success: function(data) {
 $("#loading").fadeOut('slow');
 $("#sub_cat").append(data);
 }
 });
 });
 })(jQuery);
 </script>

<div id="loading" style="display: none;">Loading...</div>
 <div id="sub_cat"></div>
 <?php
 }
 /**
 * AJAX action: Shows dropdown for selected parent
 */
 function getSubCat()
 {
 wp_dropdown_categories(
 "name=sub_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&child_of={$_POST['cat_id']}"
 );
 die();
 }
 }
endif;
new frontendAjaxDropdown();

STEP 4 : To get it work place the below short code where do you need show in front end page or post