jquery chosen fails on regenerated content

Question

I am generating the contents on my <select> via ajax. The first time the <option> s load via ajax - all is good and chosen is triggered correctly, even if I had pre-loaded content in that <select> . but if i generate the <option> sa second time - i cannot get chosen to fire.

Here is a jsfiddle to show you what i mean: https://jsfiddle.net/kneidels/vrp0gz1c/

Hit GO the first time - everything is fine. But hit it again, and the select reverts back to the old non-chosen style.

Can someone help me "reset" the plugin so that it fires correctly EACH time?

Using Chosen Version: 1.87

Answer 1

Change your code from:

$("#trigger").click(function(){
    $("#myselect").show().html('<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>');
    $('#myselect_chosen').remove();
    $("#myselect").chosen({rtl: true, allow_single_deselect: true});    
})

to:

$("#trigger").click(function(){
    let $mySelect = $("#myselect");

  // Make sure previous instantiations have been cleaned-up.
    $mySelect.chosen("destroy");
    $mySelect.html('<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>');
    $mySelect.chosen({rtl: true, allow_single_deselect: true});
})

You can see this working here ie subsequent presses of "Go" now result in the chosen component being rendered correctly.

You didn't need the call to show() (which just displays the element) and your remove statement was invalidating the instantiated chosen object.

Answer 2

Can you try the following?

 $("#trigger").click(function(){ var Select = $('#myselect'); Select.find('option').remove().end(); Select.append('<option value="1">1</option>'); Select.append('<option value="2">2</option>'); Select.append('<option value="3">3</option>'); Select.append('<option value="4">4</option>'); Select.val('').trigger('chosen:updated'); Select.chosen({rtl: true, allow_single_deselect: true}); }) 

 @import url("https://harvesthq.github.io/chosen/chosen.css"); #myselect { width: 150px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script> <select id="myselect" multiple="multiple" size="3"> </select> <br><br><br><a href="javascript:;" id="trigger">Go</a> 

Answer 3

the jQuery version is the actual culprit here - and there is no need to destroy the previous instance.

it works like this, with later versions of jQuery:

var vals = ...; //read old selected options values, add new ones
$(select).val(vals);
$(select).trigger("chosen:updated");

Answer 4

The problem in your app at this line of code :

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

Actually after first time you trigger the click function you are removing the Multi select options instead of resting it so the chosen will not work after that.

if you read the chosen jQuery plugin Documentation on github you will find this easy method to fix your problem and reset the chosen plugin each time you trigger it:

• Destroying Chosen

To destroy Chosen and revert back to the native select:

$("#form_field").chosen("destroy");

Now your javascript code should be:

  $("#trigger").click(function(){
        $("#myselect").show().html('<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>');
        $('#myselect').chosen("destroy");
        $("#myselect").chosen({rtl: true, allow_single_deselect: true});    
    })

you can try it from here .