0

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?

0

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.

| improve this answer | |
  • Thanks @GhostToast, this looks a lot different from what I had before based on the snippet from the other thread. The jQuery part however doesn't seem to do anything. The excerpts are showing both before I have even selected anything. Would that have to do with the fact that the #office-chooser already has been closed? – user2015 Aug 6 '13 at 18:48
  • I forgot that by default they'll all be showing. Edited to show a style you might use to overcome that. also edited the "show" statement. i think that will work. – GhostToast Aug 6 '13 at 18:54
  • hmm nothing changes, it looks like the jQuery does not have any effect at all. There is no class switching which I sort of expected. There are no javascript errors in the browser, so that is not it. – user2015 Aug 6 '13 at 18:59
  • I've not tested this, so you might have to fiddle a bit with the jQuery. I hope this gets you pointed in the right direction at least. I also edited that code a couple times, so make sure you have the latest. – GhostToast Aug 6 '13 at 19:03
  • Don't know an awful lot about jQuery, but I will try to figure it out. You definitely helped me with a big step in the right direction! Thanks so much! – user2015 Aug 6 '13 at 19:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy