Вопрос или проблема
У меня есть три каскадных выпадающих списка, я использую код Яна Бочинца, но работает только первый уровень, когда я выбираю класс, это не работает, должен активироваться третий выпадающий список и показывать группы.
Я вижу, что jQuery('#parent_grado').change не работает, не знаю, связано ли это с тем, что он создается динамически.
Можете ли вы помочь мне найти ошибку или посоветовать, возможно ли то, что я пытаюсь создать веб-страницу для своей школы, спасибо.
Это мой модифицированный код
<?php
//Родительский и дочерний с ajax
function parent_child_cat_select() { ?>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function() {
//второй выпадающий список
jQuery('#parent_grado').change(function(){
var parentgrado=jQuery('#parent_grado').val();
alert("hola");
// вызов 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);
}
})
});
//первый выпадающий список
jQuery('#parent_cat').change(function(){
var parentCat=jQuery('#parent_cat').val();
// вызов 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">';
// Получить категории как массив
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 }
//Первый выпадающий список класс
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">';
// Получить категории как массив
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();
} // конец if
}
add_action('wp_ajax_category_select_action', 'implement_ajax');
add_action('wp_ajax_nopriv_category_select_action', 'implement_ajax');//для пользователей, не вошедших в систему.
Спасибо за вашу помощь
Уже решил свою проблему, и причина была в том, что компонент создавался динамически. Решение заключается в использовании .on(“change”, вместо .change(function().
Я делюсь кодом Яна Бочинца с модификацией для использования трех или более выпадающих списков.
//Родительский и дочерний с ajax
function parent_child_cat_select() { ?>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function() {
//второй выпадающий список
jQuery('#sub_cat_div').on('change','#parent_grado',function(){
var parentCat=jQuery('#parent_grado').val();
// вызов 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);
}
})
});
//первый выпадающий список
jQuery('#parent_cat').change(function(){
var parentCat=jQuery('#parent_cat').val();
// вызов 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">';
// Получить категории как массив
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">';
// Получить категории как массив
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();
} // конец if
}
add_action('wp_ajax_category_select_action', 'implement_ajax');
add_action('wp_ajax_nopriv_category_select_action', 'implement_ajax');//для пользователей, не вошедших в систему.
Ответ или решение
Решение проблемы с каскадными выпадающими списками на сайте
Введение
Вам была представлена проблема с каскадными выпадающими списками, когда при выборе значения в первом и втором списках третья выборка (группы) не отображалась. Эта таблица описывает, как можно было бы решить эту проблему, основываясь на предоставленном коде и описании.
Описание проблемы
Согласно описанию, при выборе значения в первом выпадающем списке (школы) второй выпадающий список (градус) работал правильно, но при выборе значения во втором списке третий выпадающий список (группы) не активировался. Код, используемый для обработки изменений, был следующим:
jQuery('#parent_grado').change(function(){ ... });Вы заметили, что код для обработки изменения состояния не работал, вероятно, из-за динамического создания элементов.
Решение
Проблема была решена путем изменения метода обработки событий. Вместо использования change, который не срабатывает на динамически созданных элементах, был применен метод .on("change", ...). Этот метод позволяет отслеживать новые элементы, добавленные на страницу.
Вот обновленный фрагмент кода:
jQuery('#sub_cat_div').on('change', '#parent_grado', function(){
var parentCat = jQuery('#parent_grado').val();
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);
}
});
});Обновленный код
Вот полный обновленный код с исправлениями, который включает три каскадных выпадающих списка:
function parent_child_cat_select() { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#parent_cat').change(function(){
var parentCat = jQuery('#parent_cat').val();
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);
}
});
});
jQuery('#sub_cat_div').on('change', '#parent_grado', function(){
var parentCat = jQuery('#parent_grado').val();
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);
}
});
});
});
</script>
<form action="<?php bloginfo('url'); ?>/" method="get">
<div id="parent_cat_div"><?php
$terms = get_terms('grupos', ['hide_empty' => false, 'parent' => 0]);
echo '<select id="parent_cat" name="escuelas">';
echo '<option disabled selected value> -- Seleccione Escuela -- </option>';
foreach ($terms as $term) {
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
}
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 }
function implement_ajax() {
$parent_cat_ID = $_POST['parent_cat_ID'];
$nameid = $_POST['nameid'];
if (isset($parent_cat_ID)) {
$terms = get_terms('grupos', ['hide_empty' => false, 'parent' => $parent_cat_ID]);
if ($terms) {
echo '<select id="' . $nameid . '" name="grado">';
echo '<option disabled selected value> -- Seleccione Grado -- </option>';
foreach ($terms as $term) {
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
}
echo '</select>';
} else {
echo '<select name="sub_cat_disabled" id="sub_cat_disabled" disabled="disabled"><option>No child categories!</option></select>';
}
die();
}
}
add_action('wp_ajax_category_select_action', 'implement_ajax');
add_action('wp_ajax_nopriv_category_select_action', 'implement_ajax');Заключение
В результате изменений, описанных выше, ваша каскадная структура выпадающих списков теперь работает корректно. Пользователи могут выбирать школу, затем степень, а затем группы без каких-либо проблем. Важно использовать метод .on() для всех динамических элементов, чтобы обеспечить корректную работу всех функций JavaScript на страницах.