Вопрос или проблема
Как выбрать родительскую категорию и показать детей для выбора в другом select?
это код (родительская таксономия)
<select>
<option value=""><?php esc_html_e('Selecciona País', 'eltd-tours'); ?></option>
<?php
//Listado de taxonomias por país
$tax_terms = get_terms(array(
'taxonomy' => 'tipo_pais',
'hide_empty' => false,
'hierarchical' => true,
'orderby' => 'parent',
'fields' => 'all',
'parent' => '0', ) );
foreach ($tax_terms as $tax_term) {?>
<option value=""><?php echo $tax_term->name;?></option>
<?php }?>
</select>
мне нужен код для дочерней таксономии, помогите, пожалуйста!
Если я правильно вас понял, вы хотите иметь два select, один для родительских терминов и другой для дочерних терминов, которые будут динамически заполняться на основе выбора родителя. Верно?
Сначала вам понадобится разметка html для элементов select.
<select name="parent_term">
<option value=""><?php esc_html_e('Selecciona País', 'eltd-tours'); ?></option>
<?php echo implode( '', my_select_options( my_parent_tax_terms('tipo_pais') ) ); ?>
</select>
<select name="child_term"></select>
Вот вспомогательные функции, которые я использовал, чтобы сделать html немного чище.
function my_parent_tax_terms( string $taxonomy ) {
$terms = get_terms(array(
'taxonomy' => $taxonomy,
'hide_empty' => false,
'hierarchical' => true,
'orderby' => 'parent',
'fields' => 'all',
'parent' => '0',
) );
return ( $terms && is_array($terms) ) ? $terms: array();
}
function my_select_options( array $terms ) {
$out = array();
foreach ($terms => $term) {
$out[] = sprintf(
'<option value="%d">%s</option>',
$term->term_id,
$term->name
);
}
return $out;
}
Затем добавьте обработчик событий для родительского термина select, чтобы он заполнял дочерний термин select при изменении выбора родителя. Вы можете сделать это с помощью jQuery или обычного javascript.
jQuery(document).on('ready', function(){
// populate child term select, when parent selection changes
jQuery('select[name="parent_term"]').on('change', function(){
// get child terms select element
var $child_select = jQuery('select[name="child_term"]');
// clear any previous options
jQuery($child_select).empty();
// get new options
var $child_options = get_child_terms_from_admin_ajax_or_WP_REST_or_localized_script();
// loop options to append them to the child select
for (i = 0; i < $child_options.length; i++) {
jQuery($child_select).append(`<option value="${$child_options[i].value}">${$child_options[i].name}</option>`);
}
});
});
Обратите внимание, что дочерние термины должны откуда-то поступать. Это может быть либо устаревший admin-ajax, более современный WP REST API, или вы даже можете создать большой конфигурационный массив с родительскими терминами и их дочерними терминами, а затем сделать его доступным для jQuery/js с помощью wp_localize_script().
Ответ или решение
Конечно, эффективная реализация функционала выбора родительской категории и динамического отображения дочерних категорий — это важная задача в разработке веб-проектов на базе WordPress. Рассмотрим детально, как можно реализовать эту функцию.
Шаг 1: Создание HTML-шаблона с двумя элементами <select>
Во-первых, мы создадим два элемента <select>: один для выбора родительской категории (например, страны), и второй, который будет динамически заполняться дочерними категориями (например, городами).
<select name="parent_term">
<option value=""><?php esc_html_e('Selecciona País', 'eltd-tours'); ?></option>
<?php echo implode( '', my_select_options( my_parent_tax_terms('tipo_pais') ) ); ?>
</select>
<select name="child_term"></select>Шаг 2: Создание вспомогательных функций
Теперь создадим две вспомогательные функции в PHP, которые помогут получить термины для элементов <select>.
function my_parent_tax_terms( string $taxonomy ) {
$terms = get_terms(array(
'taxonomy' => $taxonomy,
'hide_empty' => false,
'hierarchical' => true,
'orderby' => 'parent',
'fields' => 'all',
'parent' => 0,
));
return is_array($terms) ? $terms : array();
}
function my_select_options( array $terms ) {
$out = array();
foreach ($terms as $term) {
$out[] = sprintf(
'<option value="%d">%s</option>',
$term->term_id,
esc_html($term->name)
);
}
return $out;
}Шаг 3: JavaScript для динамического обновления второго <select>
Используем jQuery для мониторинга изменений в первом элементе <select> и обновления второго.
jQuery(document).ready(function(){
jQuery('select[name="parent_term"]').on('change', function(){
var selectedParentId = jQuery(this).val();
var $childSelect = jQuery('select[name="child_term"]');
$childSelect.empty();
if(selectedParentId) {
jQuery.ajax({
url: 'your-server-endpoint-url', // замените на ваш URL для AJAX запроса
method: 'POST',
data: { parent_id: selectedParentId },
success: function(response) {
response.forEach(function(child){
$childSelect.append(`<option value="${child.id}">${child.name}</option>`);
});
}
});
}
});
});Шаг 4: Получение дочерних элементов через AJAX или REST API
Для получения дочерних элементов используйте либо AJAX, либо WP REST API. Создайте серверный обработчик, который будет возвращать массив дочерних терминов в формате JSON. Например, так может выглядеть обработчик AJAX:
add_action('wp_ajax_get_child_terms', 'get_child_terms');
add_action('wp_ajax_nopriv_get_child_terms', 'get_child_terms');
function get_child_terms() {
$parent_id = intval($_POST['parent_id']);
$terms = get_terms(array(
'taxonomy' => 'tipo_pais',
'hide_empty' => false,
'parent' => $parent_id
));
$output = array();
foreach ($terms as $term) {
$output[] = array('id' => $term->term_id, 'name' => esc_html($term->name));
}
wp_send_json($output);
}Убедитесь, что в ваших скриптах прописаны правильные пути и они загружаются при загрузке страницы. Это обеспечит корректную работу функционала.
Заключение
Этот метод позволяет создать динамический и интерактивный интерфейс для пользователя. Такая реализация на базе AJAX или REST API делает сайт более отзывчивым и улучшает пользовательский опыт. Учитывайте безопасность запросов и авторизацию, если необходимо, чтобы информация не могла быть изменена злоумышленниками.