Как добавить раскрывающийся элемент в форму, нажав кнопку Добавить новый BTN, где раскрывающиеся параметры содержат данные из таблицы БД

Question

Я хочу добавить выпадающий список динамически, нажав кнопку добавления ().И вариант выпадающего списка будет исходить из моей базы данных mysql.

Я пробовал ниже в jquery, но не могу отобразить записи элементов из моей таблицы "items".

<script type="text/javascript">
$(document).ready(function() {
    var x = 0;
    $('#save_btn').hide();

    $('#add_btn').click(function(e) {
    e.preventDefault();
    appendRow(); // appen dnew element to form 
    x++; // increment counter for form
    $('#save_btn').show(); // show save button for form
  });

    $('#input_wrapper').on('click', '.deleteBtn', function(e) {
    e.preventDefault();
    var id = e.currentTarget.id; // set the id based on the event 'e'
    $('div[id='+id+']').remove(); //find div based on id and remove
    x--; // decrement the counter for form.

    if (x === 0) { 
        $('#save_btn').hide(); // hides the save button if counter is equal to zero
    }
  });

  $('#save_btn').click(function(e) {
    e.preventDefault();
    var formData = $('#test_form').serializeObject(); // serialize the form
    var obj; //obj can be use to send to ajax call
    if(Array.isArray(formData.fn)) {
        for(var i = 0; i < formData.fn.length; i++) {
        obj = {};
        // set the obj for submittion
        obj.firstName = formData.fn[i];
        obj.lastName = formData.ln[i];
        // This object could be push into an array
        console.log('object from form array ', obj);
      };
    } else {
        obj = {};
      obj.firstName = formData.fn;
      obj.lastName = formData.ln;
      console.log('single obj from form ', obj);
    }
  });

  function appendRow() {
    $('#input_wrapper').append(
        '<div id="'+x+'" class="form-group" style="display:flex;">' +
          '<div>' +
            '<select name="items" class="form-control" placeholder="First 
              Name">**<option> Item one</option><option> Item 2</option>** 
             `enter code here`</select>' +
          '</div>' +
          '<div>'+
          '<input type="text" id="'+x+'" class="form-control" name="ln"                                         placeholder="Last Name"/>'+
          '</div>' +
          '<div>'+
            '<button id="'+x+'" class="btn btn-danger deleteBtn"><i class="glyphicon glyphicon-trash"></i></button>' +
          '</div>' +
        '</div>');
  }

});
</script>

Я хочу, чтобы одна часть элемента содержала данные, отображающие запись из таблицы элементов вместо статистического текста и значения, записанного выше.

Answer 1

В контроллере вы хотите передать данные в представление, например:

// $dropdown_options could be an associative array of value and label
$data['dropdown_options'] = $dropdown_options;
// Call your view with the packed data
return $this->load->view('your_form', $data);

В форме вам нужно будет преобразовать массив php в Javascript.

var dropdownOptions = <?php echo json_encode($dropdown_options) ?>;

Если у вас есть массив в Javascript, вы можете объединить каждую опцию.

var optionString = "";
for (var i in dropdownOptions) {
  optionString += "<option>"+dropdownOptions[i]['label']+"</option>";
}
var selectString = "<select>"+optionString+"</select>";