Loading the options of a select form field via jQuery Ajax

Question

Basically I am trying to load a front-end form select field via jQuery AJAX.

The XML form field is

<field name="student_ids"
  type="list"
  required="true"
  label="Select Students"
  multiple="multiple" />

The field displayed in the form with empty values since I haven't provided any options. The options are added while selecting an another select via jQuery Ajax.

jQuery.each(items, function (i, item) {
  jQuery('#jform_student_ids').append(jQuery('<option>', { 
    value: item['id'],
    text : item['value'] 
  }));
});

The source generated as below with the added options.

<div class="controls">
  <select id="jform_student_ids" name="jform[student_ids][]" class="required chzn-done" multiple="" required="required" aria-required="true" style="display: none;">
    <option value="10">Student 1 [STU0000006]</option>
    <option value="11">New Student [STU0000007]</option>
  </select>
  <div class="chzn-container chzn-container-multi" style="width: 220px;" title="" id="jform_student_ids_chzn">
    <ul class="chzn-choices">
      <li class="search-field">
        <input type="text" value="Select some options" class="default" autocomplete="off" style="width: 144px;"></li>
    </ul>
    <div class="chzn-drop">
      <ul class="chzn-results"></ul>
    </div>
  </div>
</div>

However the form doesn't show the added items in the multiselect box.

Answer 1

If I rightly remember, you need to update it if any dynamic changes are made.

You can do so with the following:

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

Hope this helps