Невозможно изменить JQuery кнопку отправки, чтобы раскрыть выберите и отправить

Question

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

Мой базовый wp_query:

<?php

$postsperpage = isset($_POST['amt_per'])? $_POST['amt_per']: 10;


        $args = array(
        'post_type'=>'product',
        'posts_per_page' => $postsperpage,
    );

    $the_query = new WP_Query( $args );

    if ( $the_query->have_posts() ) {
        echo '<ul>';
        while ( $the_query->have_posts() ) {
            $the_query->the_post();

            echo '<li>' . get_the_title() . '</li>';
        }
        echo '</ul>';

        wp_reset_postdata();

    } else {

    }

?>

В уроке, который я использовал, было несколькокнопки, значения которых были числом постов на странице;

    <form method="post">
  <select id="select-box">
    <option class="amt-button" name="amt_per" value="1">1</option>
    <option class="amt-button" name="amt_per" value="2">2</option>
    <option class="amt-button" name="amt_per" value="3">3</option>
    <option class="amt-button" name="amt_per" value="4">4</option>
  </select>
</form>

и jQuery;

<script>
jQuery(document).ready(function($) {
    // Postsperpage
    $('select').click(function(){
        $(this).closest('form').submit();
    });
});
</script>

---

Что я хочу сделать, так это изменить кнопки на выпадающиевниз установите флажок, подобный этому;

<select id="select-box" method="post">
    <option class="amt-button" name="amt_per" value="1">1</option>
    <option class="amt-button" name="amt_per" value="2">2</option>
    <option class="amt-button" name="amt_per" value="3">3</option>
    <option class="amt-button" name="amt_per" value="4">4</option>
</select>

Проблема, с которой я столкнулся сейчас, заключается в том, что мой исправленный jQuery не будет обновлять запрос с правильными сообщениями на странице, это то, что я придумал;

$(function() {
  $('#select-box').on('change', function(e) {
    $(this).closest('form')
           .trigger('submit')
  })
})

любая помощь приветствуется, спасибо !!

ОБНОВЛЕНИЕ

Благодаря @Krystian Barchański я обновил свой выпадающий списоккод и завернутый в.Это заставляет форму срабатывать, когда вы выбираете раскрывающееся значение, но теперь страница просто перезагружается с теми же публикациями на странице, и раскрывающееся меню возвращает исходное значение, я предполагаю, что это проблема jquery, так как при использовании кнопок все работало нормально?

Answer 1

Вам необходимо изменить имя поля выбора amt_per.не для вариантов.

 <form method="post" action="">
  <select id="select-box" name="amt_per">
    <option class="amt-button" value="1">1</option>
    <option class="amt-button" value="2">2</option>
    <option class="amt-button" value="3">3</option>
    <option class="amt-button" value="4">4</option>
  </select>
</form>

Answer 2

Вы должны обернуть <select> в <form> следующим образом:

<form  method="post">
  <select id="select-box">
    <option class="amt-button" name="amt_per" value="1">1</option>
    <option class="amt-button" name="amt_per" value="2">2</option>
    <option class="amt-button" name="amt_per" value="3">3</option>
    <option class="amt-button" name="amt_per" value="4">4</option>
  </select>
</form>

В вашем примере вы рассматриваете <select> как его можно отправить, и он отправит запрос по почте, но этоможет быть сделано только с помощью формы.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select - здесь вы найдете список доступных атрибутов для выбора нет method, ни url.