/CSS/Select2 make previously selected options non deletable

Select2 make previously selected options non deletable

/* 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;
}

Source: stackoverflow.com

Select2 make previously selected options non deletable

<option value="NV" data-select2-id="73" locked="locked">Nevada</option>

Source: stackoverflow.com

Select2 make previously selected options non deletable

<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>

Source: stackoverflow.com

Select2 make previously selected options non deletable

$(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();
        }
     });
});

Source: stackoverflow.com

Similar codes

1 vote302 views1 answer
Import maxcdn.bootstrapcdn.com not in index.html in specific component file
CSS
0 vote323 views1 answer
Null vs void
CSS
0 vote339 views2 answers
Curved lines css
CSS
0 vote314 views1 answer
Npm ERR! 404 Not Found - GET https://registry.npmjs.org/taiwindcss - Not found
CSS
7 votes306 views2 answers
Css list remove dot
CSS
22 votes325 views2 answers
Rgb white
CSS
68 votes380 views6 answers
Center position absolute
CSS
21 votes355 views5 answers
CSS italic
CSS
45 votes309 views6 answers
How to remove background color in css
CSS
1 vote308 views1 answer
Css animate border bottom on hover
CSS