“select2 membuat opsi yang dipilih sebelumnya tidak dapat dihapus” Kode Jawaban

select2 membuat opsi yang dipilih sebelumnya tidak dapat dihapus

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

select2 membuat opsi yang dipilih sebelumnya tidak dapat dihapus

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

select2 membuat opsi yang dipilih sebelumnya tidak dapat dihapus

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

select2 membuat opsi yang dipilih sebelumnya tidak dapat dihapus

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

Jawaban yang mirip dengan “select2 membuat opsi yang dipilih sebelumnya tidak dapat dihapus”

Pertanyaan yang mirip dengan “select2 membuat opsi yang dipilih sebelumnya tidak dapat dihapus”

Lebih banyak jawaban terkait untuk “select2 membuat opsi yang dipilih sebelumnya tidak dapat dihapus” di CSS

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya