Clear and refresh jQuery Chosen dropdown list
jquery, jquery-chosen
Solution
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");
});
Problem
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? :)