Select2 is a jQuery based replacement for select boxes. It supports searching, AJAX, and infinite scrolling of results.
You can add Select2 to any Select or Price Select field in your WordPress form.
Demo
How To
- Click the field settings icon.
- In the Basic tab enable the Select2 setting.
- Optional: Check the Use AJAX setting if your select field has a lot of options to improve performance.
- Click Save & Close.
Manually Adding Select2
You can also manually add Select2 to any Select or Price Select field.
Prerequisites
Select2
In order to use Select2, you must include the compiled JavaScript and CSS files on your website. There are multiple options for including these pre-compiled files. Learn more.
Sample JavaScript
Add this JavaScript to your website and replace 123
with the field ID of your select field. If you can’t find you field ID, click here.
(function($) { // When WS Form has finished rendering a form, it fires a wsf-rendered event on the document element // The event is passed the form object, form_id and instance_id $(document).on('wsf-rendered', function(e, form, form_id, instance_id) { // Select field ID goes here var field_id = 123; // Initialize select2 on the select field $('#wsf-' + instance_id + '-field-' + field_id).select2(); }); })(jQuery);
Support
For additional questions about Select2, please visit: https://select2.org/