Populating second dropdown list depending on first one in a Wordpress page

Question

Hello and have a nice day everyone. I, being not an actual coder, managed to overcome dropdown list issue in basic html, then in php using javascript in Dreamweaver. I even made it using Ajax without reloading the page. Thanks to those people who created it in plus2net. Here is the link i benefited from. http://www.plus2net.com/php_tutorial/php_drop_down_list.php

My problem is with a Wordpress page. Wordpress has a buit-in function for generating dropdown lists for pages, posts etc. I used wp_dropdown_pages function, whose reference can be found here: http://codex.wordpress.org/Function_Reference/wp_dropdown_pages

and in post-template.php file function is like this:

function wp_dropdown_pages( $args = '' ) {
$defaults = array(
    'depth' => 0, 'child_of' => 0,
    'selected' => 0, 'echo' => 1,
    'name' => 'page_id', 'id' => '',
    'show_option_none' => '', 'show_option_no_change' => '',
    'option_none_value' => ''
);

$r = wp_parse_args( $args, $defaults );

$pages = get_pages( $r );
$output = '';
// Back-compat with old system where both id and name were based on $name    argument
if ( empty( $r['id'] ) ) {
    $r['id'] = $r['name'];
}

if ( ! empty( $pages ) ) {
    $output = "<select name='" . esc_attr( $r['name'] ) . "' id='" .  esc_attr( $r['id'] ) . "'>\n";
    if ( $r['show_option_no_change'] ) {
        $output .= "\t<option value=\"-1\">" . $r['show_option_no_change'] .  "</option>\n";
    }
    if ( $r['show_option_none'] ) {
        $output .= "\t<option value=\"" . esc_attr( $r['option_none_value']  ) . '">' . $r['show_option_none'] . "</option>\n";
    }
    $output .= walk_page_dropdown_tree( $pages, $r['depth'], $r );
    $output .= "</select>\n";
}

/**
 * Filter the HTML output of a list of pages as a drop down.
 *
 * @since 2.1.0
 *
 * @param string $output HTML output for drop down list of pages.
 */
$html = apply_filters( 'wp_dropdown_pages', $output );

if ( $r['echo'] ) {
    echo $html;
}
return $html;
}

With this function and its arguments, it is very easy to populate a dropdown list, and get what you want. However my goal is to generate a second drop down with the selected value of the first one. Like the first one is car brands, and the second one is models.

To do this how can i use wp_dropdown_pages() function? If I must, how can i do this using AJax or just Javascript?

Thank you all in advance.

RST RST · Accepted Answer · 2015-01-21T08:49:08

You can't use PHP once the page is on screen, without reloading or AJAX.

You could create the second dropdown menu(s) right away and hide them at first. Then make the correct one visible when the first dropdown menu is clicked/changed using jQuery.

Or use an AJAX call to a function that will return the correct dropdown menu HTML.

In more detail:

look into how you can grab the information of a changed dropdown menu (an option is selected) using jQuery.
look into how to use AJAX in WordPress environment. Create the jQuery to call the PHP function that will return your HTML.
In your AJAX call send along the grabbed information of the dropdown menu.
On successful AJAX function you need to tell jQuery to echo the output.

Populating second dropdown list depending on first one in a Wordpress page

1 Answers