Clear and refresh jQuery Chosen dropdown list

Question

I'm trying to clear jQuery Chosen dropdown list and refresh it.

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>

When I click "Refresh" button, it should turn into this:

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

What I have tried:

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

But I can't get it to update that dropdown list... Some help? :)

Is your code in DOM ready? – Tushar Gupta - curioustushar Nov 22 '13 at 15:16 — Tushar Gupta - curioustushar, Nov 22 '13 at 15:16
Yes it is (too short comment, random text) – plexcell Nov 22 '13 at 15:21 — plexcell, Nov 22 '13 at 15:21

Praveen · Accepted Answer · 2013-11-22T15:22:55.437

182

Using .trigger("chosen:updated"); you can update the options list after appending.

Updating Chosen Dynamically: If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

Your code:

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

edited Nov 22 '13 at 15:22

answered Nov 22 '13 at 15:16

Praveen

55,303
33
133
164

4

Yeah... .html() breaks the chosen combo. – Todd Vance Mar 19 '14 at 16:17
4

Thanks, I was searching this solution – Loganathan Natarajan Mar 27 '14 at 10:16
2

YOU SAVED MY LIFE :) – Zied R. Oct 28 '16 at 21:11
1

If this doesn't work for me. try this: $('#picturegallery').trigger("liszt:updated"); – Nhan Tran Jul 03 '17 at 11:42

score 8 · Answer 2 · answered Jul 05 '18 at 09:27

8

If trigger("chosen:updated"); not working, use .trigger("liszt:updated"); of @Nhan Tran it is working fine.

answered Jul 05 '18 at 09:27

ca michel

105
2
8

1

[Please use Answers exclusively to answer the question](//meta.stackoverflow.com/q/92107). To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have [sufficient reputation](//stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](//stackoverflow.com/help/privileges/comment). In the meantime, please do not use answers to post comments. – Tim Diekmann Jul 05 '18 at 09:56
@TimDiekmann This answer is more useful to me but you're saying he made a mistake. Here we are looking for answers not to Post and Comments unlike Facebook/Instagram/Any other social Medias. `ca Michel` => Thank you. – Silambarasan R Feb 03 '20 at 05:47

score 4 · Answer 3 · answered Jul 21 '17 at 06:59

4

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

answered Jul 21 '17 at 06:59

dxpkumar

371
2
9

2

Please take a moment and describe how this code solves the problem. – 31piy Jul 22 '17 at 05:34

score 2 · Answer 4 · answered Sep 01 '20 at 11:35

2

If in case trigger("chosen:updated"); doesn't works for you. You can try $('#ddl').trigger('change'); as in my case its work for me.

answered Sep 01 '20 at 11:35

Monk

21
2

score 1 · Answer 5 · answered Dec 20 '14 at 16:23

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

score 1 · Answer 6 · answered Aug 27 '19 at 11:33

In my case, I need to update selected value at each change because when I submit form, it always gets wrong values and I used multiple chosen drop downs. Rather than updating single entries, change selector to update all drop downs. This might help someone

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

score 0 · Answer 7 · answered Sep 27 '21 at 13:31

0

you can use this for reload at the end of page , maybe this one help you

<script>
  $(".chosen-select").chosen();
</script>

answered Sep 27 '21 at 13:31

Monu

27
5

Clear and refresh jQuery Chosen dropdown list

7 Answers7

Linked

Related