select2 make previously selected options non deletable

Solutions on MaxInterview for select2 make previously selected options non deletable by the best coders in the world

showing results for - "select2 make previously selected options non deletable"
Gwenaëlle
12 Nov 2019
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}
Michelle
04 Feb 2018
1<option value="NV" data-select2-id="73" locked="locked">Nevada</option>
2
Jona
14 Jun 2019
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>
Ana
08 Aug 2019
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});
similar questions
no select css