Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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.

share|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? –  Piet 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. –  Piet 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! –  Piet Aug 6 '13 at 19:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.