2

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.

enter image description here

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.