Question

我有一个由Wordpress在下拉列表中生成的页面列表，点击，如何提交表单并转到所选页面？

<form id="work" action="" method="post">
<select name="work">
    <?php $pages = get_pages(array('child_of' => '15', 'sort_column' => 'menu_order')); 
    foreach($pages as $post) {
    setup_postdata($post);
    $fields = get_fields(); ?>
        <option class="work-dropdown" value="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></option>    
    <?php } wp_reset_query(); ?> 
</select>           
</form>

我尝试了这个jquery，但我不确定这是否正确以及该操作应该放置什么：

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$('.work-dropdown').change(function() {
  $('#work').submit();
});
});
</script>

Answer 1

如果您只是想重定向页面，请尝试：

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
   $('select[name="work"]').change(function(){
        window.location = $(this).val();
    })
});
</script>

您可能希望向select添加ID以使jQuery选择器更快。因此，您可以在select中添加id="page-redirect"，将jQuery对象更改为$('#page-redirect')。选择ID比类或属性快得多。

如果您希望表单发布到所选的网址，请尝试：

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
    $('#work select[name="work"]').change(function(){
        $('#work').attr('action', $(this).val()).submit();
    });
});
</script>

Answer 2

jQuery(document).ready(function ($) {
    $('.work-dropdown').change(function () {
        $('#work').attr('action', $(this).val());
        $('#work').submit();
    });
});

会这样做

Answer 3

.change()无法写入option的选择器。它必须是select。因此，$('[name=work]')需要成为您的选择者。

此外，看起来您的链接存在于选项的值中。以下代码应该有效。

$('[name=work]').change(function() {
    window.location = $(this).val();
});

编辑：

你不能提交＆amp;然后，如果您正在重置提交下拉列表，请重定向到该页面。在这种情况下，您需要提交并且您没有重置下拉列表＆amp;然后根据网址或索引进行重定向

$('[name=work]').change(function() {
    $('#work').submit();
});
//handle it on document ready & assuming your index's first option is plain text 'Select from below'
if($('[name=menu] :selected').index() > 0)
{
    window.location = $(this).val();
}

点击提交下拉菜单

3 个答案: