How to output the content of a Custom Post Type from a drop down form?

This is going to be 1 part processing an array, and 1 part jQuery.

<?php
// assume you have a loop already

$html_out="";
$select="<select id="office-chooser">";
$select .= '<option value="">Select an Office</option>';

while($loop->have_posts()) : $loop->the_post();
    // add each div with excerp. It's ID is unique and correlates to value of select drop down
    $html_out .= '<div class="office-entry" id="office-'.$post->ID.'">'.get_the_excerpt().'</div>';
    $select   .= '<option value="office-'.$post->ID.'">'.get_the_title().'</option>';
endwhile;

// wrap up $select
$select .= '</select>';

echo $select;
echo $html_out;

?>

<script type="text/javascript">
    jQuery(function($){
        $('#office-chooser').change(function(){
            var $selected_office = $(this).val();
            if($selected_office !== ''){
                $('div.office-entry').hide();
                $('#' + $selected_office).show();
            }
        });
    });
</script>

Let me know if you have questions

Edit:

Adding this style

.office-entry { display:none; }

should fix things.

Edit:

Related Posts: