Aleš Sýkora wrote

User friendly Multiple Select Field with Toolset Forms & Select2.js

11. 6. 2019 in

Using the standard multiple select field is bad. Bad for UX. Why should I hold down the CTRL when I need select more than one value? Let’s make your multiple select fields user friendly with Select2.js.

The difference

Standard Toolset ’ s Bootstrap multi select field use mouse drag & CTRL or SHIFT for multiselect.

Bootstrap 3 basic multi select field

Select2.js multi select field use only mouse click for select multiple options.

Select2.js user friendly multi select field

Try it out!

[cred-form form=”multiple-select-example-without-select2″ ]
[cred-form form=”select2-javascript-example” ]

The method

“Install” Select2.js to WordPress

  1. Download and move Select2 dist files to your Theme folder on FTP (I am using /public_html/wp-content/themes/my-child-theme/js)
    • You can also embed the scripts from CDN. I am using FTP because it is fastest for me.
  2. Register and Enqueue scripts and CSS styles in functions.php
function enqueue_select2_jquery() {
    wp_register_style( 'select2css', '/wp-content/themes/my-child-theme/js/select2.min.css', false, '1.0', 'all' );
    wp_register_script( 'select2', '/wp-content/themes/my-child-theme/js/select2.min.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_style( 'select2css' );
    wp_enqueue_script( 'select2' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_select2_jquery' );

Add Select2 Javascript to your Toolset Form

  1. Go to Toolset’s form wich contain’s multiple select form you want to use with Select2.js
    for example: [cred_field field=’field-name’ force_type=’taxonomy’ output=’bootstrap’ display=’select’]
  2. Add JS to JS editor: (.select is CSS class of multiple select field. If you want, use your own).
jQuery( document ).ready(function() {
    jQuery('.select').select2();
});

Refresh the page where selector is used. Your selector looks nice and UX is much better for user.

If you want customize your Select2.js – go to Select2 documentation. There is lot of options for customization.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Shortcode to display word count or reading time
1. 7. 2019 in
This shortcode "word-count" will display a count of words for whatever content is passed, and can optionally display an estimated reading time.
Read More
Aleš Sýkora wrote
WooCommerce category clustered by child taxonomies in WordPress
6. 2. 2021 in
If you need to display your parent product category sorted by child taxonomies in clusters – for each child taxonomy it owns row – for example: Breakfasts Category Archive – Parent category Vegetarian – child category Product 1 Product 2 Vegan – child category Product 1 Product 2 Meat lovers – child category Product 1 […]
Read More
Aleš Sýkora wrote
Astra Theme Container Width Fix
4. 9. 2019 in
If you encounter some issues with container width on mobile device when using Astra Theme and Toolset and Bootstrap try this CSS fixes.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram