Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chosen updated not working

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

like image 694
Tien Hoang Avatar asked Jan 02 '14 09:01

Tien Hoang


People also ask

How do you reset the chosen select?

Setting the select element's value to an empty string is the correct way to do it. However, that only updates the root select element. The custom chosen element has no idea that the root select has been updated.

What is jQuery chosen?

Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors.


3 Answers

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

like image 50
Kaiyu Lee Avatar answered Nov 08 '22 08:11

Kaiyu Lee


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

like image 22
Hydrospanners Avatar answered Nov 08 '22 06:11

Hydrospanners


Code :

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

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


$("#test").chosen({
  width: "220px",
  no_results_text: "test"
});
like image 30
Steven Delgado Avatar answered Nov 08 '22 08:11

Steven Delgado