Add Select2 to a WS Form Select Field

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

1. Click the field settings icon.
2. In the Basic tab enable the Select2 setting.
3. Optional: Check the Use AJAX setting if your select field has a lot of options to improve performance.
4. 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/