多个级别类别下拉菜单三个级别不起作用

时间:2017-08-11 作者:ramiro zep

我有三个级联的下拉列表,我使用的是Ján Bočinec的代码,但当我选择等级时,它只在第一级起作用。它不起作用,应该启用第三个下拉列表并显示组。

When I choose the school, not problem the second drop-down work fine, but when I choose the grade the third drop-down not work

enter image description here

我看到jQuery(\'#parent_grado\').change 不起作用,我不知道是不是因为是动态创建的。

如果可能的话,你能帮我找到错误或建议我尝试创建学校网页的方式吗谢谢

这是我修改的代码

<?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.
谢谢你的帮助

1 个回复
SO网友:ramiro zep

已经解决了我的问题,原因是因为组件是手工创建的,解决方案是使用。改为“更改”。更改(function()。

我分享了Ján Bočinec的代码,修改后使用了三个或更多的dropdownlist。

//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.

结束