Remove options of the Select with jQuery, replace these with new ones is working but how to update "chzn search" div with jQuery?

Question

It is on the details page (edit.php), when I change a value from another dropdown field, I want to change the options of another dropdown (later by AJAX). For now my test works if I look just to the select, with console log inspector (FF), but on the screen self the original value's are shown!!??

When I open the screen than is this in my console log I see:

<select id="jform_tsch__tsch1__lfld" name="jform[tsch][tsch1][lfld]" class="list_class fieldMedium" style="display: none;" wtx-context="B7F1102E-68EB-474C-8DB9-407DCA7FBDD4">
    <option value="">Select veld</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected="selected">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

This my jQuery code (part):

jQuery('select[id^=jform_tsch__tsch][id$=__tsch]').change(function () {
    var subID = target[0]+'__'+target[1] +'__lfld';

    var newOptions = {"Option 1": "value1",
                              "Option 2": "value2",
                              "Option 3": "value3"
                             };

    jQuery('#'+subID).children('option:not(:first)').remove();

            jQuery.each(newOptions, function(key, value) {
                jQuery('#'+subID)
                    .append(jQuery("<option></option>")
                    .attr("value",key)
                    .text(value));
            });
 });

After I change my value of another dropdown, the code is executed, when I look in the console log:

<select id="jform_tsch__tsch1__lfld" name="jform[tsch][tsch1][lfld]" class="list_class fieldMedium" style="display: none;" wtx-context="B7F1102E-68EB-474C-8DB9-407DCA7FBDD4">
    <option value="">Select veld</option>  
<option value="Option 1">value1</option><option value="Option 2">value2</option><option value="Option 3">value3</option></select>

So the new option value's are added at the select.!

But if I press on the dropdown arrow than still the old value's are shown and that is because of the

<div class=chz-search">

which does also have the original value's, see my screenshot . Of course I can update the 'ul' as well by jQuery I think, but I'm thinking is this the way how it should be done in Joomla???

Is there a kind of default way how to replace the options of select in Joomla. Or is the alternative 'submit'? I read also something about the chosen.jQuery.js library, but I'm searching for an example how to use this.

BR.

Nico

Answer 1

Thats because of the chosen.js - i had the same question a few weeks ago :

Update List field rendering after ajax update

For chosen you can call:

jQuery('#jform_identificator').trigger("chosen:updated");

after you changed the options, this triggers the update.

Edit: in Joomla! V3.x and old version of chosen is used and the trigger is:

jQuery('#jform_identificator').trigger("liszt:updated");

kind regards Marco

Answer 2

It is working with this one:

jQuery('#jform_identificator').trigger("**liszt**:updated");

Even with the 'z' in liszt', I thought this must be a typo, but not!!!

I had the one which Marco mentioned tried earlier, but that one is not working, in my situation. Why is that one of Marco has mentioned, not working? I see that one regularly in other treads. It is also working without $document->addScript('/media/jui/js/chosen.jquery.js');!!

BR.,

Nico