web-dev-qa-db-fra.com

Comment réinitialiser une option de sélection choisie par jQuery avec jQuery?

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.

jqueryjquery-chosen
63
James Wilson

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');
157
Joseph Silber

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.

http://harvesthq.github.com/chosen/

12
rcdmk

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.

8
Rakesh

Essaye ça:

$("#autoship_option option[selected]").removeAttr("selected");
4
Antonio Beamud

Ceci est plus efficace que trouver.

$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");
2
Philip
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]);
}
2
NIrav Modi
$('#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

2
Kareem

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.

1
Harsh Gupta
jQuery("#autoship_option option:first").attr('selected', true);
1
mafafu
jQuery('.chosen-processed').find('.search-choice-close').click();
0
Abdulla Abu Zakham

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.

0
Artur Stępień

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");
        });
0
Naresh Ramoliya

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");
        }
      });
     }
0
Deepa MG

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.

0
priyanka yadav

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");
0
ter24

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

0
chindirala sampath kumar

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/

0
bancer

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 ('')

0
Nir

Un simple ajout de changement de déclencheur comme ceci: 

$('#selectId').val('').trigger('change');
0
buidan