jquery - Submit drop down on click

Question

I have a list of pages generated by Wordpress within a drop down, on click, how can submit the form and goto the page that was selected?

<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>

I tried this jquery but I'm not sure if that's correct and what to put in the action:

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

Answer 1

If you simply want to redirect the page try:

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

You may want to add an ID to the select to make the jQuery selector faster. So you would add: id="page-redirect" to the select change the jQuery object to $('#page-redirect'). ID's are selected much faster than classes or attributes.

If you want the form to post to the selected URL then try:

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