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

Question

I have a Custom Post Type called office and I output a list of names of these Offices using a dropdown menu from a thread here on WPSE: Dropdown list of a custom post type.

What I would like to do next is not sending the visitor to the single-office, but instead show a line of text underneath the selected office that outputs a sentence with some info of this office, let's say the excerpt.

I basically want to get something similar as on this website: http://www.healthysanfrancisco.org/visitors/How_To_Apply.aspx

What should I do to accomplish this?

Answer 1

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.