dropdown with no submit

时间:2016-02-26 作者:Tom Withers

所以我有一个下拉菜单,当用户选择一个下拉项id时,它有一个使用特定模板的所有页面的列表,希望这些页面重新定向到该页面。

这是我到目前为止所拥有的。。。

            <div class="col-md-6 col-md-offset-3">
                <?php
                //create a var using get_pages create an array and get all page names
                $pages =  get_pages(array(
                    \'meta_key\' => \'_wp_page_template\',
                    \'meta_value\' => \'template-services.php\'
                ));
                ?>
                <p>Looking for something else?</p>
                <select id="cat" class="form-control">
                    <?php
                    // for each item in pages array assign to the new var page
                        foreach( $pages as $page ) {
                        //echo out var page for each item in the array
                            echo \'<option>\' . $page->post_title . \'</option>\';
                        }?>
                </select>
            </div>
有人能告诉我怎样才能做到这一点吗?我知道Wordpress codex上有一个脚本,允许你对分类进行修改,但我不知道如何修改它以满足我的需要

3 个回复
SO网友:Shady Alset

您可以使用“get\\u page\\u link”函数检索当前页面的永久链接(如果在循环中)或任何任意页面ID(如果作为第一个参数传递)。

类似这样:

<a href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a>
参考号:https://codex.wordpress.org/Function_Reference/get_page_link

SO网友:Shady Alset

没问题,请尝试使用选项“onChange”事件:

类似这样:

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>

只需将页面permalinke添加到选项值即可。

SO网友:Sumit

首先将输入字段包装在form 直接使用表单元素不是好主意。然后让表单正常提交,并用javascript绑定。因此,无论js是禁用还是启用,它都可以以两种方式工作。

考虑以下示例:-

<div class="col-md-6 col-md-offset-3"><?php
    //create a var using get_pages create an array and get all page names
    $pages =  get_pages(array(
        \'meta_key\' => \'_wp_page_template\',
        \'meta_value\' => \'template-services.php\'
    ));

    if (!empty($pages)) { ?>
        <p><?php _e(\'Looking for something else?\', \'your-text-doamin\'); ?></p>
        <form method="GET" action="<?php echo home_url(); ?>">
            <select id="cat" class="form-control" name="p"><?php
                // for each item in pages array assign to the new var page
                echo \'<option data-url="" value="">\' . __(\'Select\', \'your-text-domain\') . \'</option>\';
                foreach( $pages as $page ) {
                    //echo out var page for each item in the array
                    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(\'Submit\', \'your-text-domain\'); ?>" /></noscript>
        </form><?php
    } ?>
</div>
我在这里使用data-url 用于通过javascript和带有页面id的值进行重定向,以便我们可以正常提交表单。包装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\');
       } 
    });
});