问题
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?
回答1:
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");
}
});
JSFiddle demo
回答2:
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.
来源：https://stackoverflow.com/questions/32334738/how-to-prevent-deleting-of-tags-from-select2