I've created a select2 widget with tags:true
. Is there a way to prevent the deletion of tags by click on the selected item in the drop down, so that the tag only can be removed by clicking the cross in the tag?
2 Answers
You can use the event select2:unselecting
to cancel the tag deletion from the item, eg
$(".js-example-tags").select2({
tags: true
}).on("select2:unselecting", function (e) {
// check if originalEvent.currentTarget.className is "select2-results__option" (in other words if it was raised by a item in the dropdown)
if ($(e.params.args.originalEvent.currentTarget).hasClass("select2-results__option")){
e.preventDefault();
// close the dropdown
$(".js-example-tags").select2().trigger("close");
}
});
-
1For anyone looking to also prevent the removal when clicking the 'x' on one of the tags, check for the class
select2-selection__choice__remove
. May 24, 2022 at 14:45
I found that exist a option call locked
, with this I can do it.
Only must add the option locked="locked"
in the option like this:
<option value="NV" data-select2-id="73" locked="locked">Nevada</option>
and ready. If you want, you can add option that begin selected in the select
like this:
<option value="NV" data-select2-id="73" selected locked="locked">Nevada</option>
For example
$(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.select2.pleaseStop();
}
});
});
/* 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;
}
<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>
The jsfiddle example is this:
https://jsfiddle.net/FabianMontoya97/pch789y6/2/
This Answer is a compilation of different post in Stackoverflow that tried to found the solution. Thank you so much.