Автоматическое заполнение выпадающих с дубликатом и добавочным идентификатором в Wordpress Admin

Question

Привет,

Я хочу создать 3 раскрывающихся списка для заполнения в соответствии с выбором предыдущего, затем раздел с 3 раскрывающимися списками, которые я хочу дублировать с инкрементным идентификатором. Все в админке Wordpress.

До сих пор я выполнил заполнение второго раскрывающегося списка в соответствии с первым раскрывающимся списком. Теперь мне нужна помощь, чтобы заполнить третий раскрывающийся список согласно второму раскрывающемуся списку, а затем иметь возможность дублировать раздел.

Мне бы хотелось, чтобы имя и идентификатор "order_category", "order_product" и "order_supplier" стали " order [x] [категория] "," order [x] [продукт] "и" order [x] [поставщик] ", где« x »представляет идентификатор, который увеличивается на +1 для каждого дубликата ul.

Спасибо.

Предварительный просмотр

Страница администратора Wordpress

<ul class="inputs">
    <li>
        <p><label for="order_category">Choose category</label></p>
        <select name="order_category" id="order_category" class="regular-text categories">
            <option value="">Choose category</option>
            <option value="1">Category 1</option>
            <option value="2">Category 2</option>
            <option value="3">Category 3</option>
        </select>
    </li>
    <li>
        <p><label for="order_product">Choose Product</label></p>
        <select name="order_product" id="order_product" class="regular-text load-products">
            <option value="">Choose Product</option>
        </select>
    </li>
    <li>
        <p><label for="order_supplier">Choose Supplier</label></p>
        <select name="order_supplier" id="order_supplier" class="regular-text load-suppliers">
            <option value="">Choose Supplier</option>
        </select>
    </li>
    <li>
        <p><a href="">Duplicate</a> - <a href="">Remove</a></p>
    </li>
</ul>

функций. php

function get_category_product_scripts() {
    // Register the script
    wp_register_script( 'get-category-product', get_stylesheet_directory_uri(). '/js/get-category-product.js', array('jquery'), false, true );

    // Localize the script with new data
    $script_data_array_product = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'load_products' ),
    );
    wp_localize_script( 'get-category-product', 'category_product', $script_data_array_product );

    // Enqueued script with localized data.
    wp_enqueue_script( 'get-category-product' );
}
add_action( 'admin_enqueue_scripts', 'get_category_product_scripts' );


function get_products_by_ajax_callback() {
    check_ajax_referer('load_products', 'security');
    $category = $_POST['order_category'];   // category id
    $args = array(
        'posts_per_page'  => -1,
        'post_type'    => 'product',
        'post_status'  => 'publish',
        'orderby' => 'name',
        'order' => 'ASC',
        'tax_query' => array(
            array(
                'taxonomy' => 'category',
                'field'    => 'term_id',
                'terms'    => array( $category ),
                'operator' => 'IN',
            ),
        ),
    ); ?>
    <?php
    $products = new WP_Query( $args );
    if ( ($products->have_posts()) ) while ($products->have_posts()) : $products->the_post();
        $product = get_post_meta(get_the_ID(),'product',true);?>
        <option value="<?php echo get_the_ID(); ?>"><?php echo get_the_title(); ?></option>
    <?php
    endwhile; // end of the loop. ?>
    <?php
    wp_die();
}
add_action('wp_ajax_get_products_by_ajax', 'get_products_by_ajax_callback');
add_action('wp_ajax_nopriv_get_products_by_ajax', 'get_products_by_ajax_callback');

get-category-product. js

jQuery(function($) {
    jQuery('body').on('change', '.categories', function() {
        var cat_id = jQuery(this).val();
        if(cat_id != '') {
            var data = {
                'action': 'get_products_by_ajax',
                'order_category': cat_id,
                'security': category_product.security
            }

            jQuery.post(category_product.ajaxurl, data, function(response) {
                jQuery('.load-products').html(response);
            });
        }
    });
});

Answer 1

Чтобы добавить и удалить группы выбранных входов и изменить их текущее имя, я бы ввел 3 новые функции. Один для обработки добавления новых групп, другой для удаления и один для сортировки и переименования оставшихся групп.

function removeSelects( $btn ) {
	$btn.closest('ul').remove();
  sortSelects();
}

function addSelects() {
  let $template = $('#connectedSelectsTemplate');
	let $connectedSelects = $template.clone();
  $connectedSelects.attr('id', null);
  $('#selectlist').append($connectedSelects);
  sortSelects();
}

function sortSelects() {
	let $connectedSelects = $('#selectlist .connectedSelects');
  $.each($connectedSelects, function() {
  	let $selects = $(this).find('select');
    let id = $(this).index();
    $.each($selects, function() {
      let $select = $(this);
      let newName = $select.attr('name').replace(/\d+/, id);
      $select.attr('name', newName);
      // just to visualize the name
      $select.parent().find('label').text(newName);
    });
  });
}

#connectedSelectsTemplate{
  display: none;
}

.connectedSelects {
  list-style-type: none;
}

.connectedSelects li{
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="connectedSelects" id="connectedSelectsTemplate">
  <li>
    <label for="order_category">Choose category</label><br>
    <select name="order[0][category]" class="regular-text categories form-control">
      <option value="">Choose category</option>
      <option value="1">Category 1</option>
      <option value="2">Category 2</option>
      <option value="3">Category 3</option>
    </select>
  </li>
  <li>
    <label for="order_product">Choose Product</label><br>
    <select name="order[0][product]" class="regular-text load-products">
      <option value="">Choose Product</option>
    </select>
  </li>
  <li>
    <label for="order_supplier">Choose Supplier</label><br>
    <select name="order[0][supplier]" class="regular-text load-suppliers">
      <option value="">Choose Supplier</option>
    </select>
  </li>
  <li>
    <button onClick="removeSelects( $(this) );">
      remove
    </button>
  </li>
</ul>

<div id="selectlist">

</div>
<button onClick="addSelects()">
  add
</button>