J'ai essayé de nombreuses choses et rien ne semble fonctionner.
J'utilise jQuery et le plugin Chosen.
Méthodes que j'ai essayées:
var select = jQuery('#autoship_option');
select.val(jQuery('options:first', select).val());
jQuery('#autoship_option').val('');
jQuery('#autoship_option').text('');
jQuery('#autoship_option').empty('');
jQuery("#autoship_option option[value='']").attr('selected', true);
Il montre toujours l’option Autoship active une fois qu’elle a été sélectionnée. Je n'arrive pas à l'obtenir pour effacer la sélection.
Voici la boite de sélection:
<select id="autoship_option" data-placeholder="Choose Option..."
style="width: 175px;" class="chzn-select">
<option value=""></option>
<option value="active">Active Autoship</option>
</select>
Quelqu'un est-il familier avec Chosen et peut-il effacer une zone de sélection avec une option? (Il y aura plus d'options à l'avenir.
Définir la valeur de l'élément select
sur une chaîne vide is comme il convient. Cependant, cela ne met à jour que l'élément racine select
. L'élément personnalisé chosen
n'a aucune idée que la racine select
a été mise à jour.
Pour notifier chosen
que la select
a été modifiée, vous devez déclencher chosen:updated
:
$('#autoship_option').val('').trigger('chosen:updated');
ou, si vous n'êtes pas sûr que la première option est une chaîne vide, utilisez ceci:
$('#autoship_option')
.find('option:first-child').prop('selected', true)
.end().trigger('chosen:updated');
Lisez la documentation ici (recherchez la section intitulée Mise à jour choisie de manière dynamique).
P.S. Les anciennes versions de Chosen utilisent un événement légèrement différent:
$('#autoship_option').val('').trigger('liszt:updated');
La première option devrait suffire: http://jsfiddle.net/sFCg3/
jQuery('#autoship_option').val('');
Mais vous devez vous assurer que vous exécutez ceci sur un événement comme click
d'un bouton ou ready
ou un document, comme sur le jsfiddle.
Assurez-vous également qu'il y a toujours un attribut value sur les balises option. Sinon, certains navigateurs renvoient toujours vide sur val()
.
Modifier:
Maintenant que vous avez clarifié l'utilisation du plugin Chosen, vous devez appeler
$("#autoship_option").trigger("liszt:updated");
après avoir changé la valeur pour mettre à jour l’interface.
Essayez ceci pour recharger la boîte de sélection mise à jour avec le dernier fichier JS choisi.
$("#form_field").trigger("chosen:updated");
http://harvesthq.github.io/chosen/
Il sera mis à jour le menu déroulant choisi avec la nouvelle boîte de sélection chargée avec Ajax.
Essaye ça:
$("#autoship_option option[selected]").removeAttr("selected");
Ceci est plus efficace que trouver.
$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
Utilisez la configuration ci-dessus et appliquez class='chosen-select-deselect'
pour désélectionner manuellement et définir la valeur vide
ou si vous voulez désélectionner l'option dans tous les combos puis appliquez la configuration comme ci-dessous
var config = {
'.chosen-select' : {allow_single_deselect:true},//Remove if you do not need X button in combo
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
$('#autoship_option').val('').trigger('liszt:updated');
et définissez la valeur d'option par défaut sur ''
.
Il doit être utilisé avec la version mise à jour choisie, disponible sur ce lien: https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js .
J'ai passé une journée entière à découvrir à la fin que jquery.min
est différent de chosen.jquery.min
Je ne sais pas si cela s'applique à l'ancienne version de choisie, mais maintenant, dans la version actuelle (v1.4.1), ils ont une option $('#autoship_option').chosen({ allow_single_deselect:true });
. Cela ajoutera une icône «x» à côté du nom sélectionné. Utilisez le désactivez le champ 'select'.
PS: assurez-vous que vous avez choisi le fichier 'Sprite.png' au bon endroit, conformément au fichier choisi.css, afin que les icônes soient visibles.
jQuery("#autoship_option option:first").attr('selected', true);
jQuery('.chosen-processed').find('.search-choice-close').click();
Si vous avez besoin d'avoir la première option sélectionnée par aucune que sa valeur (parfois la première valeur d'option n'est pas vide) utilisez ceci:
$('#autoship_option').val($('#autoship_option option:first-child').val()).trigger("liszt:updated");
Il obtiendra la valeur de la première option et le définira comme sélectionné, puis déclenchera la mise à jour sur Choisi. Donc, cela fonctionne comme réinitialiser à la première option de la liste.
Vous pouvez essayer ceci pour réinitialiser le menu déroulant (vide)
$("#autoship_option").click(function(){
$('#autoship_option').empty(); //remove all child nodes
var newOption = $('<option value=""></option>');
$('#autoship_option').append(newOption);
$('#autoship_option').trigger("chosen:updated");
});
des solutions ci-dessus, rien n'a fonctionné pour moi. Cela a fonctionné:
$('#client_filter').html(' '); //this worked
Pourquoi donc? :)
$.ajax({
type: 'POST',
url: xyz_ajax,
dataType: "json",
data : { csrfmiddlewaretoken: csrftoken,
instancess : selected_instances },
success: function(response) {
//clear the client DD
$('#client_filter').val('').trigger('change') ; //not working
$('#client_filter').val('').trigger('chosen:updated') ; //not working
$('#client_filter').val('').trigger('liszt:updated') ; //not working
$('#client_filter').html(' '); //this worked
jQuery.each(response, function(index, item) {
$('#client_filter').append('<option value="'+item.id+'">' + item.text + '</option>');
});
$('#client_filter').trigger("chosen:updated");
}
});
}
Si vous utilisez chosen
, un plugin jquery, alors pour actualiser ou effacer le contenu de la liste déroulante, utilisez:
$('#dropdown_id').empty().append($('< option>'))
dropdown_id.chosen().trigger("chosen:updated")
L'événement chosen:updated
sera re-build
lui-même en fonction du contenu mis à jour.
Les nouvelles bibliothèques choisies n'utilisent pas le liszt. J'ai utilisé ce qui suit:
document.getElementById('autoship_option').selectedIndex = 0;
$("#autoship_option").trigger("chosen:updated");
Exactement j'avais la même exigence. Mais réinitialiser la liste déroulante en définissant simplement une chaîne vide avec jquery ne fonctionnera pas. Vous devriez également déclencher la mise à jour.
Html:
<select class='chosen-control'>
<option>1<option>
<option>2<option>
<option>3<option>
</select>
Jquery:
$('.chosen-control').val('').trigger('liszt:updated');
parfois en fonction de la version du contrôle choisi que vous utilisez, vous devrez peut-être utiliser la syntaxe ci-dessous.
$('.chosen-control').val('').trigger("chosen:updated");
Référence: Comment réinitialiser l’option de sélection Jquery choisie
HTML:
<select id="autoship_option" data-placeholder="Choose Option..."
style="width: 175px;" class="chzn-select">
<option value=""></option>
<option value="active">Active Autoship</option>
</select>
<button id="rs">Click to reset</button>
JS:
$('#rs').on('click', function(){
$('autoship_option').find('option:selected').removeAttr('selected');
});
Fiddle: http://jsfiddle.net/Z8nE8/
je pense que vous devez attribuer une nouvelle valeur à la sélection. Par conséquent, si vous souhaitez effacer votre sélection, vous souhaitez probablement l'assigner à celle qui a la valeur = "". Je pense que vous pourrez l'obtenir en assignant la valeur à une chaîne vide donc .val ('')
Un simple ajout de changement de déclencheur comme ceci:
$('#selectId').val('').trigger('change');