web-dev-qa-db-fra.com

Chargement des options d'un champ de formulaire de sélection via jQuery Ajax

En gros, j'essaie de charger un champ de sélection de formulaire front-end via jQuery AJAX.

Le champ de formulaire XML est

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

Le champ affiché dans le formulaire avec des valeurs vides puisque je n’ai fourni aucune option. Les options sont ajoutées lors de la sélection d'une autre sélection via jQuery Ajax.

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

La source générée comme ci-dessous avec les options ajoutées.

<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>

Toutefois, le formulaire n'affiche pas les éléments ajoutés dans la zone de sélection multiple.

enter image description here

joomla-3.xjformajax
2
Malaiselvan

Si je me souviens bien, vous devez le mettre à jour si des modifications dynamiques sont apportées.

Vous pouvez le faire avec les éléments suivants:

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

J'espère que cela t'aides

2
Lodder