Limit to 1 selection

How can you limit to a single selection?

I’m not sure what you mean. Select2 uses single-select mode unless one of the following is true:

  • You include the multiple attribute on your underlying HTML <select>, or
  • You pass multiple: true in the configuration object when you initialize the select2 widget.

Can you post the relevant part of your code (HTML containing your <select> element and JavaScript containing your select2 initialization call) and/or a screenshot so I can see what’s going on?

I want the look of the multi select but want to only allow a single selection

Check out the “maximumSelectionLength” configuration option. I think if you set it to 1 on a multiselect, it will allow only a single selection. It is not clear how the Select2 will behave if the user tries to make a different selection—i.e., it will either replace the current selection (ideal), or do nothing until the user first clears the existing selection (not so ideal).

If the behavior is the latter, then I would change “maximumSelectionLength” to 2, and add an event handler on the “select2:selecting” event that removes the current selection. (This event fires before the user’s current selection is displayed.) Then the new selection will appear to be the only selection, but the user won’t have to manually remove the previous selection.