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