/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

2 votes126 views1 answer
White space in css
CSS
0 vote139 views1 answer
Vue scoped scss media query
CSS
0 vote136 views1 answer
Css bottom:0 isnt the bottom of the page
CSS
0 vote142 views1 answer
Como diminuir uma imagem em css
CSS
0 vote157 views2 answers
How long ago was 1993 years
CSS
8 votes147 views4 answers
Css dark mode
CSS
0 vote153 views2 answers
Order
CSS
0 vote137 views1 answer
Border box reset
CSS
1 vote123 views1 answer
Stop anchor tag scroll to top of page
CSS
0 vote130 views1 answer
Container media queries for large displays
CSS