select2

by Jamie Bowers

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<link rel="stylesheet" href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">
		<div class="left">
		<select id="fam">
			<option></option>
			<option value="dataitems1" style="background-color:red; color:white" value="family1">Family 1</option>
			<option value="dataitems2" style="background-color:blue; color:white" value="family2">Family 2</option>
		</select>
	</div>
	<div class="right">
		<select id="products">
		<option></option>
		</select>
	</div>
	<div class="right"><button id="addProd" class="btn btn-primary btn-sm">Add Product</button></div>
	<div class="clear"></div>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><div id="items" class="flex-container"></div></div>

</div>
</div>
</div>

CSS

html,
body{
  height: 100%;
}
/* DivTable.com */
.divTable{
	display: table;
	width: 200%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}


.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
  width: 50%
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 5px;
  padding: 10px;
  font-size: 15px;
}



.wrapper{
    margin: auto;
}

.left{
	float: left;
	width: 10%
}

.right{
	float: left;
	width: 10%
}


#clear {
    clear: both;
}

.badge { 
background-color: blue;
 color:white;
}

#select2-fam-results li:nth-child(1),
.select2-container.bg-red li {
  background-color: red;
}

#select2-fam-results li:nth-child(2),
.select2-container.bg-yellow li {
  background-color: yellow;
}

JavaScript

var dataitems1 = [
    {
        id: 1,
        text: 'enhancement', 
		badge: ['fa-user-secret']	
    },
    {
        id: 2,
        text: 'bug',
		badge: ['fa-user-secret', 'fa-bomb']
    },
    {
        id: 3,
        text: 'duplicate'
    },
    {
        id: 4,
        text: 'invalid'
    },
    {
        id: 5,
        text: 'wontfix'
    }
];


var dataitems2 = [
    {
        id: 1,
        text: 'Bread', 
		badge: ['fa-bomb'] 	
    },
    {
        id: 2,
        text: 'Milk',
		badge: ['fa-user-secret', 'fa-bomb']
    },
    {
        id: 3,
        text: 'TP'
    },
    {
        id: 4,
        text: 'Water'
    },
    {
        id: 5,
        text: 'Meat'
    }
];

const productOptions = {
  dataitems1: {data: dataitems1, theme: 'bg-red'},
  dataitems2: {data: dataitems2, theme: 'bg-yellow'},
};

const productsConfig = {
  width: "100%",
  theme: 'bootstrap4 my-custom-class',
  placeholder: "Select item",
  allowClear: true,
  templateSelection: formatText,
  templateResult: formatText, 
  data: dataitems2, 
   escapeMarkup: function(m) {
      return m;
   }
};

function formatText (icon) {
if(icon.badge == undefined){
    return  $('<span>' + icon.text + '</span>');
} else {
  return  $('<span><span class="badge">'+ icon.badge.length + '</span> ' + icon.text + '</span>');
}
	
};

$('#products').select2(
	Object.assign({},
    productsConfig,
    {data: null}
  )
 );


$('#fam').select2({
theme: 'bootstrap4 my-custom-class', 
placeholder: "Select item",
width: "100%", 
 escapeMarkup: function(m) {
      return m;
   }
})



$('#fam').on('change', function() {
  // get selected value from the #fam select2
  const selected = $(this).val();
  // get the new products config (products config + data options)
 const options = productOptions[selected];

  // get the new products config (products config + data options + theme)
  const newProductsConfig = Object.assign({}, productsConfig, {
    data: options.data,
    theme: `${productsConfig.theme}...