點擊提交下拉菜單

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> 

您可能想要將ID添加到select以使jQuery選擇器更快。 所以你要添加：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(); 
}); 

編輯：

你不能做提交&然後重定向頁面，如果你重新上提交下拉。在情況下，你需要提交你沒有重置然後重定向基於URL或指數下拉&，

$('[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(); 
}