如何在视图中向数组添加元素并将其传递给codeigniter中的控制器？

Question

I have the following code in my view. I use a select dropdown to show the available options, the selected options get added to a list below it.

I'd like to save the selected options ("li" elements) in an array so I can use this function in my controller and save the array values in a datbase

$this->Proveedormodel->add_uk_proveedor_familia($idProveedor, $nombresFamilia);

What would be the best way to achieve this?

$("#agregarFamilia").click(function() {
  if ($('#idFamilia').val() != 0) {
    var names = $('#idFamilia').find('option:selected').text();
    $("#idFamilia option:selected").remove();
    $('#selectedList').append('<li>' + names + '<button type="button" class="delete btn btn-danger btn-xs pull-right">Quitar</button></li>')
  }
});

$("body").on("click", ".delete", function() {
  var name = $(this).parent().text().replace(/Quitar/, '');
  $(this).parent().remove();
  $("#idFamilia").append($("<option></option>").val(name).html(name));
  //Returns the removed item to the dropdown list in alphabetical position
  var foption = $('#idFamilia option:first');
  var soptions = $('#idFamilia option:not(:first)').sort(function(a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
  });
  $('#idFamilia').html(soptions).prepend(foption);
});

#selectedList li {
  margin-bottom: 10px
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="form-group">
  <div class="col-md-6">
    <select id="idFamilia" name="idFamilia" class="form-control">
      <option value="0">Select</option>
      <option value="PCR">PCR</option>
      <option value="CABLES">CABLES</option>
    </select>
  </div>

  <div class="col-md-2">
    <a style="display:block;width:145px" id="agregarFamilia" class="btn btn-primary">
      <span class="fa fa-plus"></span> Add
    </a>
  </div>
</div>

<div>
  <ul id="selectedList"></ul>
</div>

Answer 1

try this one:

sample list

<ul id="selectedList">
   <li>test 1</li>
   <li>test 2</li>
   <li>test 3</li>
</ul>

script

var asd = $("#selectedList li");
var list_holder_array = [];

asd.each(function() {
    list_holder_array.push($(this).text());
});

produces

list_holder_array = Array [ "test 1", "test 2", "test 3" ]

now you have the li contents in array, you can now pass this to your controller via ajax then you can do whatever you need it for