I have a drop down selector that is populated with certain parent pages, these will be schools eventually.
Ex:
- Jamestown Elementary
- Park County High School
- Greenvale Middle School
This is the code: (Currently, for testing purposes, it is simply pulling all pages - I will change this later but it does not make a difference in the problem I am having)
<div id="left-area-full">
<select name="page-dropdown"
onchange='document.location.href=this.options[this.selectedIndex].value;'>
<option value="">
<?php echo esc_attr( __( 'Select School' ) ); ?></option>
<?php
$pages = get_pages();
foreach ( $pages as $page ) {
$option = '<option value="' . get_page_link( $page->ID ) . '">';
$option .= $page->post_title;
$option .= '</option>';
echo $option;
}
?>
</select>
</div> <!-- end #left-area-full -->
For whatever reason, I am at a loss on how to accomplish the next part, though perhaps it is my lack of expertise in JS, Jquery, or AXJAX (which I think the latter will be my solution).
I want a second cascading select drop-down that is populated based on what the previous selection was. Each of the schools will have teacher pages. These pages will be listed as children of the particular school so I can use that relationship in my code.
So for example, let's say the first drop down was Greenvale Middle School, then the next drop down would populate with all the teachers.
Ex:
- Mrs. Smith
- Mr. Newton
- Mrs. Green
- Mrs. Hodge
I basically know that once the first selection is made, I will need to just re-run nearly the same code, but change the parameters a bit. Just not sure where to start.
Thanks!
Mike