Wordpress下降孩子的类别孩子

Question

I am new to programming and i am trying to create 4 level drop down. As of now i am referring to the link here.

With the above link, i can only create 2 level drop down. Since my programming skills are on the beginner side, i am not sure how to achieve this.

I have created wordpress categories like this:

Parent Category > Child 1 Category > Child 2 Category > Child 3 Category

There should be 4 Drop Down:

Parent Drop Down

Child1 Drop Down

Child2 Drop Down

Child 3 Drop Down

Once the user selects all the drop down, it should redirect to a post with customize links as follows:

http://www.example.com/parent/child1/child2/child3/

Is it possible to create 4 level drop down with customized redirection?

Answer 1

Well, i have tried to add the below code into functions.php. The first drop down is working, when i select the second drop down, it does not auto-populate the third drop down.

Here is the code which i have tried so far.

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_subcat1', array($this, 'getSubCat1') );
 /**
 * Register ajax action for non loged in user
 */
 add_action('wp_ajax_nopriv_get_subcat1', array($this, 'getSubCat1') );
 
 
 add_action( 'wp_ajax_get_subcat2', array($this, 'getSubCat2') );
 /**
 * Register ajax action for non loged in user
 */
 add_action('wp_ajax_nopriv_get_subcat2', array($this, 'getSubCat2') ); 
 
 
 }
 /**
 * 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_cat1").empty();
 $("#sub_cat2").empty();
 $.ajax({
 type: "post",
 url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
 data: { action: 'get_subcat1', cat_id1: $("#main_cat option:selected").val() },
 beforeSend: function() {$("#loading").fadeIn('slow');},
 success: function(data) {
 $("#loading").fadeOut('slow');
 $("#sub_cat1").append(data);
 $("#sub_cat2").empty();
 }
 });
 });
 })(jQuery);
 </script>

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


 <script type="text/javascript">
 (function($){
 $("#sub_cat1").change(function(){
 $("#sub_cat2").empty();
 $.ajax({
 type: "post",
 url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
 data: { action: 'get_subcat2', cat_id2: $("#sub_cat1 option:selected").val() },
 beforeSend: function() {$("#loading").fadeIn('slow');},
 success: function(data) {
 $("#loading").fadeOut('slow');
 $("#sub_cat2").append(data);
 }
 });
 });
 })(jQuery);
 </script>

 
 
 <div id="loading1" style="display: none;">Loading...</div>
 <div id="sub_cat2"></div>
 
 <?php
  

 
 function getSubCat2()
 {
 wp_dropdown_categories(
 "name=sub_cat2&selected=-1&hierarchical=1&depth=1&hide_empty=0&child_of={$_POST['cat_id1']}+{$_POST['cat_id2']}"
 );
 
 
 die();
 }

endif;
new frontendAjaxDropdown();

</div>