WordPress dropdown multiselect option

3 comments

1. The wp_dropdown_categories() function is a WordPress function that creates a dropdown of categories. You can specify how and what you want it to output based on passing various arguments to the function.

   However, there is no argument that the function accepts to change it from a single to a multiple select list.

   A simple approach is to alter the output that the function gives you after it is generated. This isn’t always the best approach to everything, but in this case, there are two key elements that make this a simple approach:

   1. While the function echoes (prints) its output by default, it accepts an argument to simply return the HTML result without outputting it (allowing you to change it before it is displayed).
   2. Changing a dropdown to a multiple select list is as simple as adding “multiple” to the HTML tag (i.e. changing <select> to <select multiple>)

   You can call the function, placing the results in a variable before it is output, then use PHP’s str_replace() on that result to slip “mulitple” into the select tag:

   /**
    * Your args from the question
    * plus turning echo off.
    * Note the change to the name (adding "[]")
    */
   $args = array(
       'class'       => 'select-submit2',
       'hide_empty'  => false,
       'selected'    => $prop_action_category_selected,
       'name'        => 'prop_action_category[]',
       'id'          => 'prop_action_category_submit',
       'orderby'     => 'NAME',
       'order'       => 'ASC',
       'show_option_none'   => __('None','wpestate'),
       'taxonomy'    => 'property_action_category',
       'hierarchical'=> true,
       'echo'        => 0,
   );
   
   /** get the dropdown **/
   $dropdown = wp_dropdown_categories( $args );
   
   /** insert "multiple" using str_replace **/
   $multi = str_replace( '<select', '<select multiple ', $dropdown );
   
   /** output result **/
   echo $multi;
   

   Passing the “echo” argument of “0” tells the function not to output anything (add any other arguments to the array as needed). Then str_replace() is run on the result, and the result of that is what you output.

   Note that you’ll need to change the “name” argument to pass an array to be able to pass/get all of the selected items.

   Log in to Reply

2. According to the docs you would need to use wp_category_checklist() instead. However if you are in need of a dirtier solution this one should help:

   $dropdown = wp_dropdown_categories($args);
   $dropdown = str_replace('id=', 'multiple="multiple" id=', $dropdown);
   

   Log in to Reply

3. In a simple and powerfull way, just add this code to your functions.php file

   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>
   

   Log in to Reply