Chosen updated not working

Question

I have a chosen dropdown. I changed options content and call trigger chosen:updated but Chosen don't rebuild the dropdown. This is my updated

<select name="shortcode" style="width: 150px; display: none;" class="chosen_select chzn-done" id="select_shortcode">
   <option value=""></option> 
   <option value="7183">7183</option>
   <option value="7983">7983</option>
</select>

And this is Chosen dropdown (It should be rebuilt and removed two last <li> )

<ul class="chzn-results">
   <li id="select_shortcode_chzn_o_1" class="active-result" style="">7183</li>
   <li id="select_shortcode_chzn_o_2" class="active-result" style="">7983</li>
   <li id="select_shortcode_chzn_o_3" class="active-result" style="">8208</li>
   <li id="select_shortcode_chzn_o_4" class="active-result" style="">8308</li>
</ul>

This is my jQuery code:

$('#select_shortcode_mask').change(function(){
    var shortcode_mask = $('#select_shortcode_mask').val();
    $('#select_shortcode').empty();
    var shortcode = {"7X83":["7183","7983"],"8x08":["8208","8308"]};
    $('#select_shortcode').append("<option value=''></option>");
    if(jQuery.isArray(shortcode[shortcode_mask])){
            $.each( shortcode[shortcode_mask], function( subkey, subvalue ) {
                $('#select_shortcode').append("<option value='"+subvalue+"'>"+subvalue+"</option>");
            })
    } else {
        var full_shortcode = ["7183","7983","8208","8308"];
        if(jQuery.isArray(full_shortcode)){
            $.each(full_shortcode, function( subkey, subvalue ) {
                $('#select_shortcode').append("<option value='"+subvalue+"'>"+subvalue+"</option>");
            })
        }
    }
    $("#select_shortcode").trigger("chosen:updated");
});

SOLVED: I use older version so it should:

$("#select_shortcode").trigger("liszt:updated");

So dump ^^

Answer 1

I use chosen plugin frequently, of course I run into this issue more than once.

normally use .trigger("chosen:updated") can solve it. But just one minute ago, this method doesn't work any more, I feel so confused, cause I use a same function in 2 js file, let's say the a.js and b.js, it works in a.js, but not work in b.js. I can't figure out why... I almost lose my mind!!!

So, I check the api again.I found the .chosen("destroy") , inspired me!

And I think it's the Ultimate Solution: destroy it and rebuild it.

$('.chosen').chosen("destroy").chosen();

Am I too loud? :p

Answer 2

Your change function calls on change for element "#select_shortcode_mask". Your select list has id: "#select_shortcode"

Answer 3

Code :

$('#test')
  .val(1)
  .trigger('liszt:update')
  .removeClass('chzn-done');

$('#test_chzn').remove();


$("#test").chosen({
  width: "220px",
  no_results_text: "test"
});

Answer 4

My Way is this...

$timeout(function() {
  $('#CampSrchId').trigger('chosen:updated');
}, 1000);

OR

window.setInterval(function() {
  $('#CampSrchId').trigger('chosen:updated');
}, 1000);      

Answer 5

I used

$("select").chosen({ width: "100%" });//chosen hack

As when using .trigger("chosen:updated"); this did not appear to resolve the issue. It looks hacky but works well.

Answer 6

In my case it was because of double inclusion of jQuery (one time in head and one time in footer)... I removed the one in footer and .trigger('chosen:updated'); works like a charm !

Answer 7

I know its an Old question but none of the exact solution worked for me so I combined @Kaiyu Lee and @Jamie code which worked!

$('#your-select-dropdown-id').chosen("destroy").chosen(); 
$('#your-select-dropdown-id').chosen({ width: "100%" });

Many Thanks to both of you, and also do not forget to trigger('change'); on page load / document ready as well if your dropdown is dependent on another dropdown.

Answer 8

$('.select-chosen').chosen({width: "100%"});