выпадающий список без отправки

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

Вот что у меня есть на данный момент…

            <div class="col-md-6 col-md-offset-3">
                <?php
                //создаем переменную, используя get_pages, создаем массив и получаем все названия страниц
                $pages =  get_pages(array(
                    'meta_key' => '_wp_page_template',
                    'meta_value' => 'template-services.php'
                ));
                ?>
                <p>Ищете что-то другое?</p>
                <select id="cat" class="form-control">
                    <?php
                    // для каждого элемента в массиве страниц присваиваем новой переменной page
                        foreach( $pages as $page ) {
                        //выводим переменную page для каждого элемента массива
                            echo '<option>' . $page->post_title . '</option>';
                        }?>
                </select>
            </div>

Может кто-то показать мне, как это сделать? Я знаю, что в кодексе WordPress есть скрипт, который позволяет делать это для категорий, но у меня нет представления, как его изменить под свои нужды.

Вы можете использовать функцию “get_page_link”, чтобы получить постоянную ссылку на текущую страницу (если в цикле) или на любую произвольную идентификацию страницы, если передать ее в качестве первого аргумента.

что-то вроде этого:

<a href="https://wordpress.stackexchange.com/questions/219011/<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a>

Ссылка: https://codex.wordpress.org/Function_Reference/get_page_link

Без проблем, попробуйте использовать событие “onChange”:

что-то вроде этого:

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Выберите...</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>

Просто добавьте постоянную ссылку на страницу в значение опции.

Сначала оберните ваше поле ввода в form, использовать элементы формы напрямую — не лучшая идея. Затем сделайте так, чтобы ваша форма отправлялась нормально и связывалась с javascript. Таким образом, она будет работать в обоих направлениях независимо от того, включен ли javascript или нет.

Рассмотрим этот пример:

<div class="col-md-6 col-md-offset-3"><?php
    //создаем переменную, используя get_pages, создаем массив и получаем все названия страниц
    $pages =  get_pages(array(
        'meta_key' => '_wp_page_template',
        'meta_value' => 'template-services.php'
    ));

    if (!empty($pages)) { ?>
        <p><?php _e('Ищете что-то другое?', 'your-text-doamin'); ?></p>
        <form method="GET" action="<?php echo home_url(); ?>">
            <select id="cat" class="form-control" name="p"><?php
                // для каждого элемента в массиве страниц присваиваем новой переменной page
                echo '<option data-url="" value="">' . __('Выберите', 'your-text-domain') . '</option>';
                foreach( $pages as $page ) {
                    //выводим переменную page для каждого элемента массива
                    echo '<option data-url="' . get_permalink($page->ID) .'" value="' . $page->ID . '">' . get_the_title($page->ID) . '</option>';
                } ?>
            </select>
            <noscript><input type="submit" value="<?php _e('Отправить', 'your-text-domain'); ?>" /></noscript>
        </form><?php
    } ?>
</div>

Здесь я использую data-url для перенаправления через javascript и значение с идентификатором страницы, чтобы мы могли отправить форму нормально. Обертываю кнопку submit в тег <noscript>, чтобы она не появлялась, когда JS включен.

Затем поместите этот javascript в ваш собственный js файл.

jQuery(document).ready(function (){
    jQuery('#cat').change(function (){
       if (jQuery(this).children('option:selected').data('url')) {
           window.location = jQuery(this).children('option:selected').data('url');
       } 
    });
});