02/03/2021

Astuce Select2

https://select2.org/

Cette astuce permet de personnaliser vos inputs select2. Vous pourrez rajouter des classes sur le dropdown du select et donc en modifier le style. De plus le design global peut être override.

<div class="form-group col-md-3">
    <label for="status">Statut</label>
    <select name="status" class="form-control">
        <option class="item-blue" value=""></option>
        <option value="item-red">Option</option>
    </select>
    <small id="passwordHelpBlock" class="form-text text-muted">
		
    </small>
</div>

// Activation des fields select2
$('.select2').select2({
	templateResult: function (data) {

	// We only really care if there is an element to pull classes from
	if (!data.element) {
	  return data.text;
	}

	var $element = $(data.element);

	var $wrapper = $('<span></span>');
	$wrapper.addClass($element[0].className);

	$wrapper.text(data.text);

	return $wrapper;
	}
});