AJAX list categories and subcategories in a select – WordPress

3 Views

I want to create a dynamic load for categories, for example, there is the “Countries” category, then “USA”, “Brazil”, “Spain” on a subcategory and “New York”, “Rio de Janeiro” and “Barcelona” at a sub-sub-category.

Like this
America [USA(New York), Brazil(Rio)] ; Europe [Spain(Barcelona)]

Read More

So I have 3 selects: First one the user would have to select “America” or “Europe”, then if I choose “America” the second one loads “Brazil” and “USA” for me to choose and so on.

What I’m trying is to use the wp_dropdown_categories function and dynamically populate the next wp_dropdown_categories choices, based on the current choice with the child_of atribute.

I tried doing something with the javascript above to get the option chosen for the first one and it worked, but I can’t see a way to populate the other select dynamically, like making a wp_dropdown_categories child_of, like this wp_dropdown_categories('child_of=the_category_i_have_chosen'); 

<script type="text/javascript">
    var dropdown = document.getElementById("cat");
    function onCatChange() {
        var value = dropdown.options[dropdown.selectedIndex].value
        }
    }
    dropdown.onchange = onCatChange;
</script>
Post Views: 3

Related posts

Leave a Reply

1 comment

  1. I am using this for city / state select. “sehir” is custom taxonomy name.

    header.php

    <script type="text/javascript">
$(function(){
$('#main_scat').change(function(){
    var $mainsCat=$('#main_scat').val();

    // call ajax
    $("#sub_scat").empty();
    $.ajax({
        url:"<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php",       
        type:'POST',
        data:'action=my_special_ajax_calls&main_catids=' + $mainsCat,

        success:function(results)
        {
            //  alert(results);
            $("#sub_scat").removeAttr("disabled");      
            $("#sub_scat").append(results);
        }
    });
});
});
</script>

    functions.php

    function implement_ajax_sehir() {
if(isset($_POST['main_catids'])) {
    if($_POST['main_catids'] != 0) {
        $categories=  get_categories('child_of='.$_POST['main_catids'].'&hide_empty=1&taxonomy=sehir'); 
        foreach ($categories as $cat) {
            $option .= '<option value="'.$cat->term_id.'">';
            $option .= $cat->cat_name;
            $option .= '</option>';
        }
        echo '<option value="0" selected="selected">İlçe Seçiniz</option>'.$option;
        die();
    } else {
        echo '<option value="0" selected="selected">İlçe Seçiniz</option>';
    }
}
}
add_action('wp_ajax_my_special_ajax_calls', 'implement_ajax_sehir');
add_action('wp_ajax_nopriv_my_special_ajax_calls', 'implement_ajax_sehir');

    main category selectbox code:

    <?php
$args = array(
'taxonomy' => 'sehir', 
'name'=>'main_scat', 
'hide_empty'=>1,
'depth'=>1,
'hierarchical'=> 1, 
'show_count' => 0,
'show_option_all'=>'Şehir Seçiniz'
);
wp_dropdown_categories( $args ); 
?>

    sub-category select box:

    <select name="sub_scat" id="sub_scat" disabled="disabled"><option value="0" selected="selected">İlçe Seçiniz</option></select>

    you can improve in this way.