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

0 vote320 views1 answer
How to make somethin gdisapear when you hover over something else html
Html
14 votes301 views6 answers
Placeholder select html
Html
325 votes570 views6 answers
Font awesome cdn link
Html
0 vote314 views1 answer
How to switch between read only input in html
Html
12 votes331 views5 answers
Meta refresh url
Html
3 votes337 views4 answers
Paragraph in html
Html
1 vote358 views1 answer
Translate html Text in magento 2
Html
0 vote313 views1 answer
Slim-rails gem
Html
2 votes343 views1 answer
How to get rid how white border on html page
Html
4 votes443 views2 answers
Strong tag html
Html