Как сделать добавление блоков по кнопке селекта?

Question

[Gorthaur]

Коллеги, добрый вечер. Прошу у вас помощи, так как не хватает знаний в области JS и JQuery.
Суть такова: необходимо селектом выбрать позицию, кнопкой добавить блок на страницу с value, полученным от выбранной кнопки, проделать это n-ное количество раз, если что-то не понравилось - удалить, а затем отправить форму со всеми полученными value post-запросом php-скрипту. Можно грабить корованы. Гугление гайдов приводило к разным решениям, но ни одно не подошло.
Вот что получилось в сухом остатке без JS:

echo '
<h2 class="sub-header">Exp</h2>
<div class="row">
  <div class="col-md-2">
  <button type="button" class="btn btn-default">Добавить поле</button></div>
  <div class="col-xs-3">
  <select class="form-control">';
$result = mysql_query("SHOW COLUMNS FROM '.$table.'");
if (!$result) {
    echo 'Ошибка при выполнении запроса: ' . mysql_error();
    exit;
}
if (mysql_num_rows($result) > 0) {
    while ($row = mysql_fetch_array($result)) {
        //$row[0] = название столбца
echo'<option value="'.$row[0].'">'.$row[0].'</option>
';
    }
}
echo '</select></div>
</div>
<div>
<thead>
<tr id="insertblock">
</tr>
</thead>
</div>
</div>';

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

Answer 1

[Александр Сисюкин]

var arr_value= [];
    $(document).on('change', '.form-control', function () {
        var value = $(this).find('option:selected').val();
        arr_value.push(value);
        $('пишем куда добавляем').append('пишем что добавляем');
    });
    $(document).on('click', 'ваша кнопка на отправку', function () {
        $.ajax({
            type: 'POST',
            url: '/адрес/',
            data: {arr_value: arr_value},
            success: function (data) {
                //если удачно что то делаем можно обнулить массив arr_value= [];
            }
        });
    });