首先将输入字段包装在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\');
       } 
    });
});