Category Archives: Select2

Limit Select2 to one selection per optgroup with multiple selection

Here is a example to create multiple select with grouped multiple select where you can select one option per group.

HTML code

<pre class="wp-block-syntaxhighlighter-code">
&amp;lt;select multiple style=&quot;width: 300px&quot;&gt;
  &amp;lt;optgroup label=&quot;Alaskan/Hawaiian Time Zone&quot;&gt;
    &amp;lt;option groupid=&quot;a&quot; value=&quot;AK&quot;&gt;Alaska&amp;lt;/option&gt;
    &amp;lt;option groupid=&quot;a&quot; value=&quot;HI&quot;&gt;Hawaii&amp;lt;/option&gt;
  &amp;lt;optgroup label=&quot;Pacific Time Zone&quot;&gt;
    &amp;lt;option groupid=&quot;b&quot; value=&quot;CA&quot;&gt;California&amp;lt;/option&gt;
    &amp;lt;option groupid=&quot;b&quot; value=&quot;NV&quot;&gt;Nevada&amp;lt;/option&gt;
    &amp;lt;option groupid=&quot;b&quot; value=&quot;OR&quot;&gt;Oregon&amp;lt;/option&gt;
    &amp;lt;option groupid=&quot;b&quot; value=&quot;WA&quot;&gt;Washington&amp;lt;/option&gt;


JavaScript Code

$(function() {
      allowClear: true,
      placeholder: "Pick a State"

    //Select2 Event handler for selecting an item
    $('select').on("select2:selecting", function(evt, f, g) {
      disableSel2Group(evt, this, true);

    // Select2 Event handler for unselecting an item
    $('select').on("select2:unselecting", function(evt) {
      disableSel2Group(evt, this, false);

  // At some point during the select2 instantation it created the 
  // data object it needs with the source select option.
  // This function, called by the events above to set the current status for the
  // group for which the selected option belongs.
  function disableSel2Group(evt, target, disabled) {
    // Found a note in the Select2 formums on how to get the item to be selected

    var selId =;
    var group = $("option[value='" + selId + "']").attr("groupid");

    var aaList = $("option", target);
    $.each(aaList, function(idx, item) {
      var data = $(item).data("data");

      var itemGroupId = $("option[value='" + + "']").attr("groupid");
      if (itemGroupId == group && != selId) {
        data.disabled = disabled;

Check demo here

Select2 Multi Select Select all when select all option

Here is a example of select2 with added styling and if user choose option all then each and every option should be selected.

Select2 Multi-Selection select all when select all

Select2 Multi-Selection select all when select all

HTML for select2

<div id="clr_cont" class="contains">
	<small>Select your favorite colors</small>
	<select class="fav_clr form-control" name="states[]" multiple="multiple">
<option value="all">all</option>

JavaScript For Select2

$(document).ready(function() {
		placeholder: 'colors',
		width: '100%',
		border: '1px solid #e4e5e7',

$('.fav_clr').on("select2:select", function (e) { 
           var data =;
            $(".fav_clr > option").prop("selected","selected");

CSS For Select2 styling

.select2-container--default.select2-container--focus .select2-selection--multiple {
	border: 1px solid #333 !important;
.select2 .select2-container .select2-container--default .select2-container--focus {
	border: 1px solid #333 !important;
.select2-container--default .select2-selection--multiple {
	border: 1px solid #333 !important;
.select2-search__field {
	background-color: white !important;
.select2-dropdown .select2-dropdown--below {
	border: 1px solid #333 !important;
.select2-results {
	background-color: #444;
	height: 100px;
	color: #222;
.select2-results__options {
	height: 100px;
body {
	background-color: #222;
	padding: 20px;
small {
	color: white;
.contains {
	background-color: #333;
	width: 500px;
	display: inline-block;
	padding: 20px;
	border-radius: 5px;

Check demo here : Select2 Multi Select all option example