Redirect wp_dropdown_pages() to an AJax request?

The following is the solution I came up with:
<div id="selection1">
<div id="dropdown1">
   <form id="choice1" action="<?php bloginfo('url'); ?>" method="get">
   <?php  
   $select = wp_dropdown_pages(
                        array(
                            'post_type' => 'page',
                            'show_option_none' => 'Select Car',
                            'echo' => 0
                        )
                    );

    echo $select; 
    ?>
   </form>
</div>

<div id="firstchoice"></div>
</div>

<script>
$('#choice1').change(function(){ //if the select value gets changed
var png = '.png';
var urlstart = <?php echo json_encode($url); ?>;
var imageSource = $(this).find('option:selected').text().replace(/\s/g, '').substring(6); //get the data from data-picture attribute
if(imageSource){ //if it has data
  $('#firstchoice').html('<img src="'+urlstart+imageSource+png+'">'); // insert image in div firstchoice
} else {
  $('#firstchoice').html(''); //remove content from div firstchoice, thus removing the image
}
})
</script>
Related Posts:
