Qu'est-ce que le droit d'effacer les select2 liste déroulante lors de l'utilisation d'Ajax?

Je rencontre un problème avec select2 où lorsque je saisis un élément, et je veux utiliser le même menu encore une fois, je n'arrive pas à supprimer l'élément précédemment sélectionné

Par exemple, disons que mon id est "#StreamName", je pensais que ce serait clair:

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

mais il semble toujours le dernier élément sélectionné. En regardant le code html qu'il semble que j'ai la force brute-il en faisant ceci:

$("#select2-StreamName-container").html("");

mais il me semble que je ne suis pas à l'aide de l'API correctement donc je voulais voir si il y a une autre suggestion ou si je suis en manque de quelque chose.

OriginalL'auteur leora | 2015-12-06

  1. 10

    Travail De Violon Source De Données Locale

    Il ressemble à la bonne façon de claire Select2 est ce qui vous a suggéré la première fois que cette réponse suggère.

    Javascript

    $(document).ready(function() {
  $("#StreamName").select2();
  $("#StreamName").val(null).trigger("change");
});

    HTML

    <select id="StreamName">
  <option value="AL">Alabama</option>
  <option value="CA">California</option>
  <option value="WY">Wyoming</option>
</select>

    De Mise À Jour À Distance De La Source De Données

    JSFiddle à l'Aide de Données à Distance

    Ce qui devrait encore travailler pour effacer un Select2 d'entrée, même lors de l'utilisation d'une source de données distante:

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

    En Full Javascript

    $(document).ready(function() {
$("#StreamName").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term, //search term
page: params.page
};
},
processResults: function(data, params) {
//parse the results into the format expected by Select2
//since we are using custom formatting functions we do not need to
//alter the remote JSON data, except to indicate that infinite
//scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
}, //let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, //omitted for brevity, see the source of this page
templateSelection: formatRepoSelection //omitted for brevity, see the source of this page
});
$("#StreamName").val(null).trigger("change");
//For testing...
$('#set-null').click(function() {
$("#StreamName").val(null).trigger("change");
});
});
function formatRepo(repo) {
if (repo.loading) return repo.text;
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
function formatRepoSelection(repo) {
return repo.full_name || repo.text;
}

    HTML

    <select id="StreamName">
<option value="3620194" selected="selected">select2/select2</option>
</select>
    dans mon cas, je ne suis pas la prédéfinition de la liste des options à l'avance. Je suis le remplissage de distance de la source de données, comme par exemple sur cette page: select2.github.io/examples.html Pour une raison quelconque, dans ce cas d'utilisation, il ne semble pas clair quand vous faites $("#StreamName").val(null).trigger("changement");
    J'ai mis à jour la réponse à inclure une source de données distante. Peut-être il ya quelque chose d'autre dans votre code source qui est à l'origine de la panne? Laissez-moi savoir si je peux l'aider.

    OriginalL'auteur adriancarriger