Multiple level category drop-down three levels is not working

Question

I have three drop-down list in cascade, I'm using the code of Ján Bočínec but it working just the first level when I choose the grade it not work, should enable the third drop-down list and show the groups.

I see that the jQuery('#parent_grado').change is not working, I don't know if is because is created dynamically.

Can you please help me to find the bug or advice me if is possible the way that I try to created the web page of my school thanks

This is my code modified

<?php
 //Parent child con ajax

 function parent_child_cat_select() { ?>
    <script type="text/javascript">
        /* <![CDATA[ */
    jQuery(document).ready(function() {

        //segundo drop down
        jQuery('#parent_grado').change(function(){
            var parentgrado=jQuery('#parent_grado').val();
            alert("hola");
            // call ajax
            jQuery.ajax({
                url:'/dentrorealdelvalle/wp-admin/admin-ajax.php',
                type:'POST',
                data:'action=category_select_action&nameid=parent_grupo&parent_cat_ID=' + parentgrado,
                success:function(results)
                {
                    jQuery("#sub_grupo_div").html(results);
                }
            })
        });

//primer drop down
        jQuery('#parent_cat').change(function(){
            var parentCat=jQuery('#parent_cat').val();              
            // call ajax
            jQuery.ajax({
                url:'/dentrorealdelvalle/wp-admin/admin-ajax.php',
                type:'POST',
                data:'action=category_select_action&nameid=parent_grado&parent_cat_ID=' + parentCat,
                success:function(results)
                {
                    jQuery("#sub_cat_div").html(results);
                }
            })
        });



    });


    /* ]]> */
</script>

<form action="<?php bloginfo('url'); ?>/" method="get">

    <div id="parent_cat_div"><?php 
    $terms=get_terms('grupos',
        array(
            'hide_empty' => false,
            'parent' => 0,
        )
        );
        $datosparent="";
    echo '<select id="parent_cat" name="escuelas">';
        // Get categories as array  
         echo '<option disabled selected value> -- Seleccione Escuela -- </option>';
        foreach ( $terms as $term ) :
            echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            $datosparent=$datosparent . ',' . $term->term_id;
        endforeach;
    echo '</select>';
     ?></div>       

    <div id="sub_cat_div"><select name="sub_cat_disabled" id="parent_grado" disabled="disabled"><option>Seleccione grado!</option></select></div>

    <div id="sub_grupo_div"><select name="sub_grupo_disabled" id="parent_grupo" disabled="disabled"><option>Seleccione grupo!</option></select></div>

    <div id="submit_div"><input type="submit" value="View" /></div>

</form>
<?php }

//Primer dropdown grado

function implement_ajax() {
    $parent_cat_ID = $_POST['parent_cat_ID'];
    $nameid = $_POST['nameid'];
    if ( isset($parent_cat_ID) )
    {
        $terms=get_terms('grupos',
        array(
            'hide_empty' => false,
            'parent' => $parent_cat_ID,
        )
        );      
    if ( $terms ) {
            echo '<select id="' . $nameid . '" name="grado">';
            // Get categories as array
            echo '<option disabled selected value> -- Seleccione Grado -- </option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            endforeach;
            echo '</select>';

    } else {
        ?><select name="sub_cat_disabled" id="sub_cat_disabled" disabled="disabled"><option>No child categories!</option></select><?php
    }
    die();
} // end if
}
add_action('wp_ajax_category_select_action', 'implement_ajax');
add_action('wp_ajax_nopriv_category_select_action', 'implement_ajax');//for users that are not logged in.

Thanks for your help

Answer 1

Already was resolve my problem and the cause is because the component was created dinamically, the solution is use .on("change", instead .change(function().

I share the code of Ján Bočínec with the modification to use three dropdownlist or more.

//Parent child con ajax

function parent_child_cat_select() { ?>
 <script type="text/javascript">
        /* <![CDATA[ */
        jQuery(document).ready(function() {

        //segundo drop down
        jQuery('#sub_cat_div').on('change','#parent_grado',function(){
        var parentCat=jQuery('#parent_grado').val();                
            // call ajax
            jQuery.ajax({
                url:'/dentrorealdelvalle/wp-admin/admin-ajax.php',
                type:'POST',
                data:'action=category_select_action&nameid=parent_grupo&parent_cat_ID=' + parentCat,
                success:function(results)
                {
                    jQuery("#sub_grupo_div").html(results);
                }
            })
        });


  //primer drop down
        jQuery('#parent_cat').change(function(){
            var parentCat=jQuery('#parent_cat').val();              
            // call ajax
            jQuery.ajax({
                url:'/dentrorealdelvalle/wp-admin/admin-ajax.php',
                type:'POST',
                data:'action=category_select_action&nameid=parent_grado&parent_cat_ID=' + parentCat,
                success:function(results)
                {
                    jQuery("#sub_cat_div").html(results);
                }
            })
        });



    });


    /* ]]> */
</script>

<form action="<?php bloginfo('url'); ?>/" method="get">

    <div id="parent_cat_div"><?php 
    $terms=get_terms('grupos',
        array(
            'hide_empty' => false,
            'parent' => 0,
        )
        );
        $datosparent="";
    echo '<select id="parent_cat" name="escuelas">';
        // Get categories as array  
         echo '<option disabled selected value> -- Seleccione Escuela -- </option>';
        foreach ( $terms as $term ) :
            echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            $datosparent=$datosparent . ',' . $term->term_id;
        endforeach;
    echo '</select>';
     ?></div>       

    <div id="sub_cat_div"><select class="ramiro" name="sub_cat_disabled" id="parent_grado" disabled="disabled"><option>Seleccione grado!</option></select></div>

    <div id="sub_grupo_div"><select class="ramiro" name="sub_grupo_disabled" id="parent_grupo" disabled="disabled"><option>Seleccione grupo!</option></select></div>

    <div id="submit_div"><input type="submit" value="View" /></div>

</form>
<?php }
function implement_ajax() {
$parent_cat_ID = $_POST['parent_cat_ID'];
$nameid = $_POST['nameid'];
if ( isset($parent_cat_ID) )
{
        $terms=get_terms('grupos',
        array(
            'hide_empty' => false,
            'parent' => $parent_cat_ID,
        )
        );      
    if ( $terms ) {
            echo '<select id="' . $nameid . '" name="grado">';
            // Get categories as array
            echo '<option disabled selected value> -- Seleccione Grado -- </option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            endforeach;
            echo '</select>';

    } else {
        ?><select name="sub_cat_disabled" id="sub_cat_disabled" disabled="disabled"><option>No child categories!</option></select><?php
    }
    die();
} // end if
}
add_action('wp_ajax_category_select_action', 'implement_ajax');
add_action('wp_ajax_nopriv_category_select_action', 'implement_ajax');//for users that are not logged in.