wp_dropdown_categories with multiple select

Question

in the search box I would like visitors to be able to search for more than one location (houses). The code right now is:

    <div class="col-md-3 col-sm-6 col-xs-12">
        <label for="property_location"><?php _ex( 'Locatie', 'property search label', 'ci_theme' ); ?></label>

        <div class="ci-select">
            <?php
                wp_dropdown_categories( array(
                    'taxonomy'          => 'property_location',
                    'hierarchical'      => true,
                    'show_option_none'  => esc_html_x( '-', 'any property location', 'ci_theme' ),
                    'option_none_value' => '',
                    'name'              => 's_property_location',
                    'id'                => 'property_location',
                    'selected'          => isset( $_GET['s_property_location'] ) ? $_GET['s_property_location'] : '',
                ) );
            ?>
        </div>
    </div>

How do I change this to a multiple select?

Thank you so much for your answer. Carlijn

Answer 1

wp_dropdown_categories has a filter applied to the output that is called right before the function returns or echos the output.

With this you can add a filter to your funtions.php file that manipulates the select field and adds a multiple attribute to it.

The filter below would search for the select opening tag and add the multiple attribute to it. You can also add the size attribute to control the number of items displayed at a time.

add_filter( 'wp_dropdown_cats', 'dropdown_filter', 10, 2);

function dropdown_filter( $output, $r ) {
    $output = preg_replace( '/<select (.*?) >/', '<select $1 size="5" multiple>', $output);
    return $output;
}

Answer 2

Just add this code to your functions.php

add_filter( 'wp_dropdown_cats', 'wp_dropdown_cats_multiple', 10, 2 );

function wp_dropdown_cats_multiple( $output, $r ) {

    if( isset( $r['multiple'] ) && $r['multiple'] ) {

         $output = preg_replace( '/^<select/i', '<select multiple', $output );

        $output = str_replace( "name='{$r['name']}'", "name='{$r['name']}[]'", $output );

        foreach ( array_map( 'trim', explode( ",", $r['selected'] ) ) as $value )
            $output = str_replace( "value=\"{$value}\"", "value=\"{$value}\" selected", $output );

    }

    return $output;
}

And add multiple arg like below:

<div class="ci-select">
    <?php
        wp_dropdown_categories( array(
            'taxonomy'          => 'property_location',
            'hierarchical'      => true,
            'show_option_none'  => esc_html_x( '-', 'any property location', 'ci_theme' ),
            'option_none_value' => '',
            'name'              => 's_property_location',
            'id'                => 'property_location',
            'selected'          => isset( $_GET['s_property_location'] ) ? $_GET['s_property_location'] : '', // e.x 86,110,786
            'multiple'          => true
        ) );
    ?>
</div>

Answer 3

This is an addition to @MahdiY answer. That answer assumes the multiselect data will be in comma delimited form. I'm finding my multi select is actually an array in which case the wp_dropdown_cats_multiple breaks. I added a line and altered the foreach.

function wp_dropdown_cats_multiple( $output, $r ) {

    if( isset( $r['multiple'] ) && $r['multiple'] ) {

        $output = preg_replace( '/^<select/i', '<select multiple data-live-search="true" data-style="btn-info"', $output );

        $output = str_replace( "name='{$r['name']}'", "name='{$r['name']}[]'", $output );

        $selected = is_array($r['selected']) ? $r['selected'] : explode( ",", $r['selected'] );
        foreach ( array_map( 'trim', $selected ) as $value )
            $output = str_replace( "value=\"{$value}\"", "value=\"{$value}\" selected", $output );

    }

    return $output;
}

Couldn't add this as a comment as my reputation is too low.

Answer 4

You can check:

wp_category_checklist You can define a custom walker and change the check-boxes to drop-down with multiple select.

wp_category_checklist output an unordered list of checkbox <input> elements labeled with category names.