web-dev-qa-db-ja.com

jQuery Ajaxを介して選択フォームフィールドのオプションをロードする

基本的に、jQuery AJAXを介してフロントエンドフォーム選択フィールドをロードしようとしています。

XMLフォームフィールドは

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

オプションを指定していないため、フォームに空の値で表示されるフィールド。オプションは、jQuery Ajaxを介して別の選択を選択するときに追加されます。

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

追加されたオプションで以下のように生成されたソース。

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

ただし、フォームの複数選択ボックスに追加されたアイテムは表示されません。

enter image description here

joomla-3.xjformajax
2
Malaiselvan

私が正しく覚えている場合、動的な変更が行われた場合は更新する必要があります。

次のようにしてこれを行うことができます。

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

お役に立てれば

2
Lodder