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 ^^

Ok, your chosen is not updated, but is the original select updated ? — BENARD Patrick, Jan 02 '14 at 09:14
Yes, my original select is updated. Feel like trigger don't run — Tien Hoang, Jan 02 '14 at 09:41
have you check for errors in your console during change event ? — BENARD Patrick, Jan 02 '14 at 09:59
Yes, there's no error in my console, total clear. My original select changed every time event occur but feel like trigger don't run. Is it rig — Tien Hoang, Jan 02 '14 at 10:17
@Tien Hoang, you can post your answer and accept it(I mean, that you shouldn't put whole information in question's section). It will help other users and will look better and more clear. Read it [self-answer](http://stackoverflow.com/help/self-answer) — Alex Kulinkovich, Nov 06 '14 at 12:02
@Vincent The trigger command, but be aware that this answer is 9 years old — Tien Hoang, Jun 19 '23 at 09:48

score 8 · Answer 1 · answered Apr 01 '16 at 07:35

8

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

answered Apr 01 '16 at 07:35

Kaiyu Lee

613
7
14

Yes this worked for me as well I tried both .trigger("chosen:updated") and .trigger("liszt:updated"); None seems to resolve. .chosen("destroy").chosen(); this worked – Sandeep May 03 '18 at 19:06
wow ! This is the only thing that worked for me. I also observed that if the select tag is static and only if options are dynamically added $("#select_shortcode").trigger("chosen:updated"); works fine, however if the whole select is dynamically constructed along with options only $('.chosen').chosen("destroy").chosen(); works. Do you know why is it so ? – bluelurker Jul 02 '19 at 11:44
Brutal. Makes the updated event entirely useless. – Vincent Feb 08 '23 at 21:13

score 3 · Answer 2 · answered Oct 21 '14 at 12:01

3

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

answered Oct 21 '14 at 12:01

Hydrospanners

195
9

score 1 · Answer 3 · edited Jul 22 '16 at 15:29

1

Code :

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

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


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

edited Jul 22 '16 at 15:29

xpy

5,481
3
29
48

answered Jul 22 '16 at 15:04

Steven Delgado

11
1
1

try to enhance your response – ddb Jul 22 '16 at 15:21

score 1 · Answer 4 · edited Jul 27 '17 at 17:44

1

My Way is this...

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

OR

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

edited Jul 27 '17 at 17:44

morten.c

3,414
5
40
45

answered Feb 07 '17 at 07:25

Asad Ali Khan

307
4
16

score 1 · Answer 5 · answered Apr 20 '22 at 08:14

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.

score 0 · Answer 6 · answered Jul 14 '15 at 10:37

0

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.

answered Jul 14 '15 at 10:37

Jamie Paterson

426
3
10

In my case, I had to set the width explicitly on the select control. Thanks for the hint! – Saurabh Mar 24 '16 at 09:15

score 0 · Answer 7 · answered Jul 07 '20 at 12:05

0

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 !

answered Jul 07 '20 at 12:05

ReaperSoon

765
7
23

score -2 · Answer 8 · edited Apr 29 '21 at 12:46

-2

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

edited Apr 29 '21 at 12:46

Tomerikoo

18,379
16
47
61

answered Apr 29 '21 at 08:57

Jegan

1

Chosen updated not working

8 Answers8