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