Add Select2 to a WS Form Select Field – WS Form

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 manually add Select2 to any Select or Price Select field.

Prerequisites

jQuery

Select2 requires that jQuery is also included on your website. jQuery already comes bundled with WordPress but you may need to enqueue it if your theme has not already done so.

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/