J'essaie d'effacer par programmation un menu déroulant à l'aide de la fantastique bibliothèque Select2 . Le menu déroulant est rempli dynamiquement avec un appel ajax distant à l'aide de l'option Select2 query
.
HTML:
<input id="remote" type="hidden" data-placeholder="Choose Something" />
Javascript:
var $remote = $('#remote');
$remote.select2({
allowClear: true,
minimumInputLength: 2,
query: function(options){
$.ajax({
dataType: 'json',
url: myURL + options.term,
error: function(jqXHR, textStatus, errorThrown){
smoke.alert(textStatus + ": server returned error on parsing arguments starting with " + options.term);
},
success: function(data, textStatus, jqXHR){
var results = [];
for(var i = 0; i < data.length; ++i){
results.Push({id: data[i].id, text: data[i].name});
}
options.callback({results: results, more: false});
}
});
}
});
Malheureusement, l'appel à $remove.select2('val', '')
lève l'exception suivante:
Uncaught Error: cannot call val() if initSelection() is not defined
J'ai essayé de définir les paramètres attr
, val
, text
et la fonction data
spécifique à Select2. Je n'arrive pas à rendre le gars clair et à fonctionner comme un bouton radio. Quelqu'un a des suggestions?
Cela fonctionne pour moi:
$remote.select2('data', {id: null, text: null})
Cela fonctionne également avec jQuery validate lorsque vous le supprimez de cette façon.
-- edit 2013-04-09
Au moment de la rédaction de cette réponse, c’était le seul moyen. Avec les correctifs récents, un moyen plus approprié est désormais disponible.
$remote.select2('data', null)
Dans le cas de Select2 Version 4+
la syntaxe a changé et vous devez écrire comme ceci:
// clear all option
$('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]});
// clear and add new option
$("#select_with_data").html('').select2({data: [
{id: '', text: ''},
{id: '1', text: 'Facebook'},
{id: '2', text: 'Youtube'},
{id: '3', text: 'Instagram'},
{id: '4', text: 'Pinterest'}]});
C'est la bonne, select2 effacera la valeur sélectionnée et affichera l'espace réservé.
$remote.select2('data', null)
Avec select2 version 4, vous pouvez utiliser cette notation courte:
$('#remote').html('').select2({data: {id:null, text: null}});
Cela passe un tableau JSON avec null id et text à la select2 lors de la création, mais en premier lieu, avec .html('')
vide les résultats précédemment stockés.
Pour select2 version 4, utilisez ceci facilement:
$('#remote').empty();
Après avoir rempli l'élément select avec l'appel ajax, vous aurez peut-être besoin de cette ligne de code dans la section success pour mettre à jour le contenu:
success: function(data, textStatus, jqXHR){
$('#remote').change();
}
Vous devriez utiliser celui-ci:
$('#remote').val(null).trigger("change");
La méthode proposée par @Lelio Faieta fonctionne pour moi, mais comme j'utilise bootstrap theme , elle supprime tous les paramètres de démarrage pour select2. J'ai donc utilisé le code suivant:
$("#remote option").remove();
Je suis un peu en retard, mais c'est ce qui fonctionne dans la dernière version (4.0.3):
$('#select_id').val('').trigger('change');
Ces deux fonctionnent pour moi pour effacer le menu déroulant:
.select2('data', null)
.select2('val', null)
Mais remarque importante: la valeur ne sera pas réinitialisée, .val () retournera la première option même si elle n’est pas sélectionnée. J'utilise Select2 3.5.3
De> 4.0 afin de vraiment nettoyer le select2 vous devez faire ce qui suit:
$remote.select2.val('');
$remote.select2.html('');
selectedValues = []; // if you have some variable where you store the values
$remote.select2.trigger("change");
Veuillez noter que nous sélectionnons le select2 en fonction de la question initiale. Dans votre cas, vous sélectionnerez probablement le select2 d'une manière différente.
J'espère que ça aide.
J'ai trouvé la réponse (compliments à user780178) que je cherchais dans cette autre question:
Réinitialise la valeur select2 et affiche placeholdler
$("#customers_select").select2("val", "");
Vous pouvez utiliser ceci ou consulter plus loin ceci https://select2.org/programmatic-control/add-select-clear-items
$('#mySelect2').val(null).trigger('change');
Cela a résolu mon problème dans la version 3.5.2.
$remote.empty().append(new Option()).trigger('change');
Selon ce problème vous avez besoin d’une option vide dans la balise select pour que l’espace réservé s’affiche.
Comme aucun d’entre eux n’a fonctionné pour moi (select2 4.0.3), la méthode std select a été choisie.
for(var i = selectbox.options.length - 1 ; i >= 0 ; i--)
selectbox.remove(i);