Update List field rendering after ajax update

Question

for one of my extensions i need to update a select list by ajax. the whole ajax call is working and i got the new option vars for the select list. I add those options in the ajax's "success" function like so:

jQuery('select#jform_identificator').append(new Option("label", "value"));

this part is ok, if i check the source code the options where set. but it does not update the field rendering unfortunately. So my select list still contains no values.

how can i call the updater / refresh the rendering for a select list in joomla's backend? (we are talking here about a default form field).

Edit: This is the innerHTML of the control container:

<select id="jform_scored_team" name="jform[scored_team]" style="display: none;">
     <option value="1">Team A</option>
     <option value="2">Team B</option>
</select>
<div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="jform_scored_team_chzn">
<a class="chzn-single chzn-default">
 <span>Select an option</span>
 <div>
      <b></b>
 </div>
</a>
<div class="chzn-drop">
  <div class="chzn-search">
     <input type="text" autocomplete="off" readonly=""></div>
     <ul class="chzn-results"></ul>
  </div>
</div>

To be honest - the field was created by Joomla Component Builder i disabled all "fancy" options so no search is active for this list.

Answer 1

If you're using ChosenJS, which is the fancy select library that Joomla 3.x uses, then you'll need to manually instruct it to update the list, because it doesn't use any observers by default.

You can do this by using the following:

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