web-dev-qa-db-fra.com

Effacer et actualiser la liste déroulante jQuery Chosen

J'essaie de vider la liste déroulante jQuery Chosen et de l'actualiser.

HTML:

<select data-placeholder="Select Picture..." class="chosen-select" style="width:250px;" id="picturegallery" tabindex="2">
    <option value="" selected="selected"></option>
    <option value="x">remove me</option>
</select>

Lorsque je clique sur le bouton "Actualiser", il devrait se transformer en ceci:

<select data-placeholder="Select Picture..." class="chosen-select" style="width:250px;" id="picturegallery" tabindex="2">
    <option value="1">test</option>
</select>

Ce que j'ai essayé

$("#refreshgallery").click(function(){
    $('#picturegallery').empty();
    var newOption = $('<option value="1">test</option>');
    $('#picturegallery').append(newOption);
});

Mais je ne peux pas le faire pour mettre à jour cette liste déroulante ... De l'aide? :)

jqueryjquery-chosen
71
plexcell

En utilisant .trigger("chosen:updated"); vous pouvez mettre à jour la liste des options après l’ajout.

Mise à jour choisie de manière dynamique: Si vous devez mettre à jour les options de votre champ de sélection et que vous souhaitez que Chosen prenne en compte les modifications, vous Vous devrez déclencher l'événement "choisi: mis à jour" sur le terrain. L'élu se reconstruira en fonction du contenu mis à jour.

Votre code:

$("#refreshgallery").click(function(){
        $('#picturegallery').empty(); //remove all child nodes
        var newOption = $('<option value="1">test</option>');
        $('#picturegallery').append(newOption);
        $('#picturegallery').trigger("chosen:updated");
    });
164
Praveen

Si trigger("chosen:updated"); ne fonctionne pas, utilisez .trigger("liszt:updated"); de @Nhan Tran, il fonctionne bien.

3
ca michel
$("#idofBtn").click(function(){
        $('#idofdropdown').empty(); //remove all child nodes
        var newOption = $('<option value="1">test</option>');
        $('#idofdropdown').append(newOption);
        $('#idofdropdown').trigger("chosen:updated");
    });
1
dxpkumar

Dans mon cas, je dois mettre à jour la valeur sélectionnée à chaque modification, car lorsque je soumets un formulaire, il reçoit toujours des valeurs erronées et utilise plusieurs listes déroulantes. Plutôt que de mettre à jour des entrées uniques, modifiez le sélecteur pour mettre à jour tous les menus déroulants. Cela pourrait aider quelqu'un

 $(".chosen-select").chosen().change(function () {
    var item = $(this).val();
    $('.chosen-select').trigger('chosen:updated');
});
0
Mubasher Shahzad

MVC 4:

    function Cargar_BS(bs) {
        $.getJSON('@Url.Action("GetBienServicio", "MonitoreoAdministracion")',
                        {
                            id: bs
                        },
                        function (d) {
                            $("#txtIdItem").empty().append('<option value="">-Seleccione-</option>');
                            $.each(d, function (idx, item) {
                                jQuery("<option/>").text(item.C_DescBs).attr("value", item.C_CodBs).appendTo("#txtIdItem");
                            })
                            $('#txtIdItem').trigger("chosen:updated");
                        });
    }
0
user3043330