web-dev-qa-db-fra.com

Désactiver l'ouverture déroulante sur select2 clear

Il semble que select2 4 ouvre par défaut la liste déroulante lors de la suppression de l'élément actuellement sélectionné. Les versions précédentes de select2 ne semblaient pas avoir ce comportement et j'essaye de le réaliser mais pas de chance pour l'instant.

Quelqu'un sait-il comment se connecter à l'événement clear pour que nous puissions désactiver son comportement par défaut et effacer l'option sélectionnée sans ouvrir la liste déroulante?

À la vôtre, Al

jqueryjquery-select2clear
17
Alberto

Peut confirmer, la prévention des événements ne semble pas fonctionner pour une raison quelconque, vous pouvez donc simplement fermer la liste déroulante après un certain délai:

$("select").select2({
    allowClear: true
}).on("select2:unselecting", function(e) {
    $(this).data('state', 'unselected');
}).on("select2:open", function(e) {
    if ($(this).data('state') === 'unselected') {
        $(this).removeData('state'); 

        var self = $(this);
        setTimeout(function() {
            self.select2('close');
        }, 1);
    }    
});

Voici un violon qui fonctionne: http://jsfiddle.net/obq3yLf2/

13
Sam Arustamyan

Vous n'avez pas besoin d'un délai d'attente pour que cela fonctionne, voici mon exemple:

$('#my-select').select2({
    allowClear: true
}).on('select2:unselecting', function() {
    $(this).data('unselecting', true);
}).on('select2:opening', function(e) {
    if ($(this).data('unselecting')) {
        $(this).removeData('unselecting');
        e.preventDefault();
    }
});
41
adamj

Veuillez vous référer à Github pour la même chose.

Empêcher select2: ouvert lors de la suppression de la sélection

De là, j'ai énuméré les réponses fournies.

1 option 

$('#select-id').on('select2:unselecting', function() {
    var opts = $(this).data('select2').options;
    opts.set('disabled', true);
    setTimeout(function() {
      opts.set('disabled', false);
    }, 1);
});

2 Option 

var $el = $('#select-id');
$el.on('select2:unselecting', function(e) {
    $el.data('unselecting', true);
}).on('select2:open', function(e) { // note the open event is important
    if ($el.data('unselecting')) {    
        $el.removeData('unselecting'); // you need to unset this before close
        $el.select2('close');
    }
});
2
Lalit Kumar Maurya

Une autre mise en œuvre simple:

$('select').on('select2:unselect', function(evt) {
    $(this).select2({
        placeholder : {
            id : '',
            text : '---None Selected---'
        },
        allowClear : true,
        theme : "bootstrap"
    }).select2('close');
});
0
Jajikanth pydimarla

J'ai eu un problème avec un court délai après avoir désélectionné l'un des éléments et cette solution a résolu ce problème pour moi:

$(this).select2({
    multiple: 'multiple',
}).on("select2:unselecting", function(e) {
    var self = $(this);
    setTimeout(function() {
        self.select2('close');
    }, 0);
});
0
Toni