/* remove X from locked tag */
.locked-tag .select2-selection__choice__remove{
display: none!important;
}
/* I suggest to hide all selected tags from drop down list */
.select2-results__option[aria-selected="true"]{
display: none;
}
.select2{
width: 100% !important;
}$(function() {
$('.select2').select2({
tags: true,
placeholder: 'Select an option',
templateSelection : function (tag, container){
// here we are finding option element of tag and
// if it has property 'locked' we will add class 'locked-tag'
// to be able to style element in select
var $option = $('.select2 option[value="'+tag.id+'"]');
if ($option.attr('locked')){
$(container).addClass('locked-tag');
tag.locked = true;
}
return tag.text;
},
})
.on('select2:unselecting', function(e){
// before removing tag we check option element of tag and
// if it has property 'locked' we will create error to prevent all select2 functionality
if ($(e.params.args.data.element).attr('locked')) {
e.preventDefault();
}
});
});<option value="NV" data-select2-id="73" locked="locked">Nevada</option>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<select class="js-example-basic-multiple select2" name="states[]" multiple="multiple">
<optgroup label="Alaskan/Hawaiian Time Zone" data-select2-id="68">
<option value="AK" data-select2-id="69" select>Alaska</option>
<option value="HI" data-select2-id="70">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone" data-select2-id="71">
<option value="CA" data-select2-id="72" selected locked="locked">California</option>
<option value="NV" data-select2-id="73" selected locked="locked">Nevada</option>
<option value="OR" data-select2-id="74">Oregon</option>
<option value="WA" data-select2-id="75">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone" data-select2-id="76">
<option value="AZ" data-select2-id="77" selected>Arizona</option>
<option value="CO" data-select2-id="78">Colorado</option>
<option value="ID" data-select2-id="79">Idaho</option>
<option value="MT" data-select2-id="80">Montana</option>
<option value="NE" data-select2-id="81">Nebraska</option>
<option value="NM" data-select2-id="82">New Mexico</option>
<option value="ND" data-select2-id="83">North Dakota</option>
<option value="UT" data-select2-id="84">Utah</option>
<option value="WY" data-select2-id="85">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone" data-select2-id="86">
<option value="AL" data-select2-id="87">Alabama</option>
<option value="AR" data-select2-id="88">Arkansas</option>
<option value="IL" data-select2-id="89">Illinois</option>
<option value="IA" data-select2-id="90">Iowa</option>
<option value="KS" data-select2-id="91">Kansas</option>
<option value="KY" data-select2-id="92">Kentucky</option>
<option value="LA" data-select2-id="93">Louisiana</option>
<option value="MN" data-select2-id="94">Minnesota</option>
<option value="MS" data-select2-id="95">Mississippi</option>
<option value="MO" data-select2-id="96">Missouri</option>
<option value="OK" data-select2-id="97">Oklahoma</option>
<option value="SD" data-select2-id="98">South Dakota</option>
<option value="TX" data-select2-id="99">Texas</option>
<option value="TN" data-select2-id="100">Tennessee</option>
<option value="WI" data-select2-id="101">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone" data-select2-id="102">
<option value="CT" data-select2-id="103">Connecticut</option>
<option value="DE" data-select2-id="104">Delaware</option>
<option value="FL" data-select2-id="105">Florida</option>
<option value="GA" data-select2-id="106">Georgia</option>
<option value="IN" data-select2-id="107">Indiana</option>
<option value="ME" data-select2-id="108">Maine</option>
<option value="MD" data-select2-id="109">Maryland</option>
<option value="MA" data-select2-id="110">Massachusetts</option>
<option value="MI" data-select2-id="111">Michigan</option>
<option value="NH" data-select2-id="112">New Hampshire</option>
<option value="NJ" data-select2-id="113">New Jersey</option>
<option value="NY" data-select2-id="114">New York</option>
<option value="NC" data-select2-id="115">North Carolina</option>
<option value="OH" data-select2-id="116">Ohio</option>
<option value="PA" data-select2-id="117">Pennsylvania</option>
<option value="RI" data-select2-id="118">Rhode Island</option>
<option value="SC" data-select2-id="119">South Carolina</option>
<option value="VT" data-select2-id="120">Vermont</option>
<option value="VA" data-select2-id="121">Virginia</option>
<option value="WV" data-select2-id="122">West Virginia</option>
</optgroup>
</select>