How to Use Select2 Control to Create Multiselect Field?

Table of Contents

Are you looking for a way to allow users to select multiple options in a field? The Select2 control is a powerful option that can help you achieve this in your custom Elementor widget. With the Select2 control, you can create a multi-select field where users can choose multiple options from a dropdown list.

To check the complete feature overview documentation of The WDesignKit Widget Builder, click here.

Requirement  – This feature is a part of The WDesignKit, make sure it’s installed & activated to enjoy all its powers.

To do this, in the Widget Builder, search and add Select2 control in the Layout. Now in the right sidebar of the HTML tab, you’ll see the unique name of the Select2 control.

Click on it, it will open a dropdown. To use the Select2 control, you have create a loop, so from the dropdown, click on the Loop option.

It will add a loop HTML in the editor.

Now, you have to add the Select2 unique name inside the loop. So remove the <!– Enter Select2 code here –> part from the code and click on the Value option from the right sidebar to add the unique name.

Then select the Select2 control, in the Drop Down Value section, you can add the options for the dropdown.

In the Value field, you have to add the value for the specific option and in the Options field, you have add the label of the option.

Click on +Add button to add multiple options.

Note: Make sure to keep the Multiple toggle enabled, otherwise it will turn into a normal single select dropdown. 

Once done, click on the Save button to save the widget.

Now, you can select multiple values from the dropdown.

Also, check How to Use Control Classes to Style UI Elements.