web-dev-qa-db-fra.com

Comment nettoyer complètement le contrôle select2?

Je travaille avec le formidable select2 control .

J'essaie de nettoyer et de désactiver le select2 avec le contenu aussi, alors je fais ceci:

$("#select2id").empty();
$("#select2id").select2("disable");

Ok, ça marche, mais si j'avais une valeur sélectionnée, tous les éléments sont supprimés, le contrôle est désactivé, mais la valeur sélectionnée est toujours affichée. Je veux effacer tout le contenu afin que l'espace réservé soit affiché. Voici un exemple que j'ai fait où vous pouvez voir le problème: http://jsfiddle.net/BSEXM/

HTML:

<select id="sel" data-placeholder="This is my placeholder">
    <option></option>
    <option value="a">hello</option>
    <option value="b">all</option>
    <option value="c">stack</option>
    <option value="c">overflow</option>
</select>
<br>
<button id="pres">Disable and clear</button>
<button id="ena">Enable</button>

Code:

$(document).ready(function () {
    $("#sel").select2();

    $("#pres").click(function () {
        $("#sel").empty();
        $("#sel").select2("disable");
    });

    $("#ena").click(function () {
        $("#sel").select2("enable");
    });
});

CSS:

#sel {
    margin: 20px;
}

Avez-vous une idée ou un conseil à ce sujet?

javascriptjqueryjquery-uijquery-select2
23
harrison4

Pourquoi tout ce trouble ???

utilisation: 

 $('#sel').select2('data', null);
30
Fernando Trindade

Essayez ceci à partir des documentations officielles de select2.

version 4 

$("#sel").val(null).trigger("change");

Pour la version 3.5.3 

$("#sel").select2("val", "");
24
Sarath Kumar

J'utilise Select2 v4.0 (4.0.6-rc.0)

L'utilisation de ce qui suit efface toutes les valeurs du champ déroulant:

$('#id_of_select2_select').empty();

Cela les supprime entièrement et ils ne peuvent pas être re-sélectionnés avant l'actualisation de la page.

Si vous souhaitez simplement supprimer la sélection, procédez comme suit:

$('#id_of_select2_select').val(null).trigger('change');

Les options actuellement sélectionnées sont effacées et l'utilisateur pourra à nouveau sélectionner les options souhaitées.

2
Jeff Sieffert

Sarath Kumar répondit:

$('#sel').val(null).trigger('change');

Référence de la documentation officielle, voici le lien:

https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

1
Tigran Vardanyan

Essayez ceci: - http://jsfiddle.net/GqbSN/

  $(document).ready(function () {
    $("#sel").select2();

    $("#pres").click(function () {
      $('#s2id_sel > a > span').text($(sel).data('placeholder')); 
        //$('.select2-container > a > span').text('This is my placeholder');
        $("#sel").select2("disable");;
       });

    $("#ena").click(function () {
        $("#sel").select2("enable");
    });
});

Remarque 

$ ('# s2id_sel> a> span'). text ($ (sel) .data ('placeholder')); Ce que je comprends en regardant ce plugin, c’est le balisage qu’il crée à partir de la sélection que nous fournissons, il génère un identifiant sous la forme # s2id_ + "yourselectelementid". Donc, ce serait une meilleure façon de l’utiliser si vous avez plusieurs contrôles de sélection et que vous voulez désactiver seulement certains ou l’un d’eux.

Si vous souhaitez effacer le contenu sélectionné: - http://jsfiddle.net/G7TXj/

1
PSL

essayez d'utiliser ceci:

$('#sel').html('').select2();
0
Omid Ziyaee

Mon select2 dans la première option à "tous". Cette option efface les autres options et la première option est sélectionnée

var $eventSelect = $("#storeList");
   $("#storeList").on("change", function (e) {
        if (e.added != undefined) {
            if (e.added.id == 0 && e.val.length>1) {
                   removeTags();
                $("#storeList").val('0').select2();

            }

        }

    });

  function removeTags(){
        $eventSelect.select2('data', null);

    }
0
gokhan duralı