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.