添加动态表单字段时，数据库值不会在select2中填充

Question

我正在尝试在我的表单中集成“添加动态字段”，与http://formvalidation.io/examples/adding-dynamic-field/下面的链接相同。一切顺利，除了数据库检索的值没有显示在formTemplate的select2'adminied.field.fv'方法中。正如官方网站所示，它正好适用于datepicker。如果有人有工作我的选择2的线索，那么这对我来说将是很大的帮助。

<!-- The template for adding new field -->
<div class="panel panel-info hide form-group" id="taskTemplate">
  <div class="panel-body" style="background: #e0e0e0;">

    <div class="col-sm-6 col-md-4 col-xs-12">
      <div class="input-group input-append date">
        <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
        <input type="text" class="form-control" name="examDate[]" placeholder="exam date" />
      </div>
    </div>

    <div class="col-sm-6 col-md-4 col-xs-12">
      <div class="input-group" id="programPicker">
        <span class="input-group-addon"><i class="fa fa-asterisk" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i>  <?php echo get_phrase('select_program'); ?></span>
        <select id="program_id" name="program_id[]" onchange="return get_programs_batchs(this.value)">
          <option disabled selected value=""> <?php echo get_phrase('select_programs'); ?></option>
          <?php 
foreach($program_list as $row2):
?>
          <option value="<?php echo $row2['program_id'];?>">
            <?php echo $row2['name'];?>
          </option>
          <?php
endforeach;
?>
        </select>
      </div>
    </div>

    <div class="col-xs-1">
      <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
    </div>
  </div>
</div>

这里是添加动态字段和表单验证代码。

$(document).ready(function() {
  // Initialize the date picker for the original due date field
  $('#examDatePicker')
  .datepicker({
    format: 'yyyy/mm/dd'
  })
  .on('changeDate', function(evt) {
    // Revalidate the date field
    $('#taskForm').formValidation('revalidateField', $('#examDatePicker').find('[name="examDate[]"]'));
  });


  $('#taskForm')
  .formValidation({
    framework: 'bootstrap',
    err: {
      container: 'tooltip'
    },
    icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      'task[]': {
        // The task is placed inside a .col-xs-6 element
        row: '.col-xs-6',
        validators: {
          notEmpty: {
            message: 'The task is required'
          }
        }
      },
      'examDate[]': {
        validators: {
          notEmpty: {
            message: 'The exam date is required'
          },
          date: {
            format: 'YYYY/MM/DD',
            min: new Date(),
            message: 'The exam date is not valid'
          }
        }
      }
    }
  })

  .on('added.field.fv', function(e, data) {
    if (data.field === 'examDate[]') {
      // The new due date field is just added
      // Create a new date picker
      data.element
      .parent()
      .datepicker({
        format: 'yyyy/mm/dd'
      })
      .on('changeDate', function(evt) {
        // Revalidate the date field
        $('#taskForm').formValidation('revalidateField', data.element);
      });
    }
    if (data.field === 'program_id[]') {
      //$(".programPicker").select2();
      data.element
      .parent()
      .select2()
      .on('change', function(evt) {
        // Revalidate the program field
        $('#taskForm').formValidation('revalidateField', data.element);
      });
    }

  })

  // Add button click handler
  .on('click', '.addButton', function() {
    var $template = $('#taskTemplate'),
        $clone    = $template
    .clone()
    .removeClass('hide')
    .removeAttr('id')
    .insertBefore($template);

    // Add new fields
    // Note that we DO NOT need to pass the set of validators
    // because the new field has the same name with the original one
    // which its validators are already set
    $('#taskForm')
    .formValidation('addField', $clone.find('[name="program_id[]"]'))
    .formValidation('addField', $clone.find('[name="examDate[]"]'))
  })

  // Remove button click handler
  .on('click', '.removeButton', function() {
    var $row = $(this).closest('.form-group');

    // Remove fields
    $('#taskForm')
    .formValidation('removeField', $row.find('[name="program_id[]"]'))
    .formValidation('removeField', $row.find('[name="examDate[]"]'));

    // Remove element containing the fields
    $row.remove();
  });
});

并且，这是添加动态表单字段

后上面代码的结果