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 ^^
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.
Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors.
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
Your change function calls on change for element "#select_shortcode_mask". Your select list has id: "#select_shortcode"
Code :
$('#test')
.val(1)
.trigger('liszt:update')
.removeClass('chzn-done');
$('#test_chzn').remove();
$("#test").chosen({
width: "220px",
no_results_text: "test"
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With