Есть ли способ сохранить в массиве PHP выбранный <option>из HTML <select>?

Question

Моя идея состоит в том, чтобы сохранить в массиве PHP выбранные <option> из разных html <select>.

В форме, которую я генерирую с помощью функции php вызывается из функции Jquery a <ul>, содержащей текст каждого элемента списка, и <select>

Примерно так:

Часть формы, в которую добавляются элементы списка:

<div>
    <label for="lineasP" id="asignarBdto" hidden>Productos de este pedido:</label>
</div>
<div>
    <ul id="lineaPedidos" hidden>
        <!-- Added here -->
    </ul>
</div>

---

JQuery функция, которая вызывает функцию PHP:

$("#pedidos").on("input", function() {
    $.get("cambio_cliente.php", { idPedido: $("#pedidos").val()}, function (data) {
        $("#lineaPedidos").empty();
        $("#lineaPedidos").append(data);

        $("#asignarBdto").show();
        $("#lineaPedidos").show();
    });
});

---

PHP функция:

// Si llegamos a este script por haber seleccionado un pedido
if(isset($_GET["idPedido"])){
    // Abrimos una conexión con la BD y consultamos la lista de productos dado un pedido
    $conexion = crearConexionBD();
    $resultado = listarProductos($conexion, $_GET["idPedido"]);

    if($resultado != NULL){
        // Para cada producto del listado devuelto
        foreach($resultado as $lineaPedido) {
            //Listamos los productos de cada pedido
            echo "<li>" . $lineaPedido["NUM_LINEA_P"] .": cantidad= ". $lineaPedido["CANTIDAD"] .", importe= ". $lineaPedido["IMPORTE"] ." <br><label>Base de dto: </label><select class=\"linPed\" required><option value=\"\" hidden disabled selected>% DTO</option> <option value=\"21\">21%</option> <option value=\"16\">16%</option> <option value=\"8\">8%</option></select></li>";
        }
    }
    // Cerramos la conexión y borramos de la sesión la variable "idPedido"
    cerrarConexionBD($conexion);
    unset($_GET["idPedido"]);
}

---

Пока все хорошо.

Форма отображает эти поля без проблем:

---

Проблема начинается здесь

Мне нужно сохранить каждый выбранный <option> в массиве, о котором я упоминал в самом начале. Я не знаю, сколько <select> будет создано, поэтому я не могу создать идентификаторы для каждого из них. Я решил создать класс (linPed) для этого выбора и попробовал эту JS функцию:

$(".linPed").on("input", function(){
   alert("all good");
});

Сначала я попытался сделать «ведение журнала», чтобы увидеть, правильно ли работает функция, но не показать предупреждение. Несмотря на это, даже если функция выполнена правильно, как мне добавить в массив выбранное значение .linPed? Или, может быть, есть более простой способ сделать это?

---

РЕДАКТИРОВАТЬ 1:

alert("hello");
    $("select.linPed").on("change", function(){
       alert("this works"); 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
    <div>
        <li>
            Hello
        </li>
        <select class="linPed">
            <option value="21">
                21%
            </option>
            <option value="16">
                16%
            </option>
            <option value="8">
                8%
            </option>
        </select>
    </div>
   <div>
        <li>
            bye
        </li>
        <select class="linPed">
            <option value="21">
                21%
            </option>
            <option value="16">
                16%
            </option>
            <option value="8">
                8%
            </option>
        </select>
    </div>
</ul>
<select class="linPed">
            <option value="21">
                21%
            </option>
            <option value="16">
                16%
            </option>
            <option value="8">
                8%
            </option>
</select>

Я создал тестовый фрагмент, если проблема заключалась в том, что <select> находились внутри <li>.

---

РЕДАКТИРОВАТЬ 2:

Я до сих пор не знаю почему, но если я попытаюсь получить доступ к значению <option> из отдельного скрипта, это не сработает. Я попытался добавить поле onchange к <select> и, наконец, работает.

Answer 1

Лично я бы использовал change вместо input в функции .on() для обнаружения изменений, например:

$('.linPed').on('change', function() {
  alert( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class='linPed'>
    <option value="1"><li>One</li></option>
    <option value="2">Two</option>
</select>

Для получения всего значения я бы использовал функцию .each(), например:

var arr = [];
$('.linPed').each(function(){
  arr.push($(this).val())
})

Если я прав, это дает вам все выбранные значения в массиве arr.

Изменить:

Я сам выполнил echo и посмотрел на него. В этом и заключается проблема. Ваш класс не linPed, а \"linPed"\.

В вашем коде заменяйте все \ ничем.

Редактировать 2:

Взглянув на ваш сниппет, сразу его увидели. Вы js запускали до загрузки html. Поместите ваш JavaScript в конец вашего кода. Или поместите готовую функцию в свой код, например

$(function () {
  //Code ..
});

Answer 2

Несмотря на то, что я не смог бы достичь решения без ответа Тима, я хочу опубликовать, как я сохранил значения html в массиве php на случай, если кто-то столкнется с этой же проблемой.

Используя onchange внутри поля <select>, я вызываю функцию js (с параметрами: значение выбранной опции и выбранный идентификатор)

<select onchange="añadirDTO(this.value, this.id)">
   ...
</select>

---

JS

Прежде всего, создайте 2 глобальные переменные, которые соответствуют параметрам функции, в данном случае массив и число.

var dtoSeleccionados = [];
var id = 0; //Initialize both var

Теперь функция, которая получает данные :

Эта функция будет вызываться каждый раз, когда пользователь изменяет выбор, поэтому, чтобы избежать бесполезных значений и сохранить только окончательное решение каждого выбора, проверьте, равен ли идентификатор выбора, переданного в качестве параметра, глобальному id var. Если это не так, мы меняем глобальный идентификатор для нового идентификатора, иначе меняем последний элемент глобального массива

function añadirDTO(baseDTO, linId){
    if(linId !== id){
        id = linId;
        dtoSeleccionados.push(baseDTO);
    }else{
        dtoSeleccionados[dtoSeleccionados.length - 1] = baseDTO;
    }
}

После того, как пользователь заполнил форму, и значения массива являются окончательными, используя вспомогательный <select multiple> поле, которое скрыто, мы модифицируем его внутреннее html следующим образом:

<div>
    <!-- we use a label to identify the element that it corresponds with the php var -->
    <label for="baseDTO" hidden></label>
    <!-- the name of the select must match with the php array name with '[]' at the end -->
    <select multiple name="baseDTO[]" id="baseDTO" hidden>

    </select>
</div>

function seleccionarTodo(){
    text="";
    for(i=0; i<dtoSeleccionados.length; i++){
        text += "<option selected value=\""+dtoSeleccionados[i]+"\"></option>\n";
    }

    document.getElementById("baseDTO").innerHTML = text;
}

Вышеупомянутая функция выполняет отправку формы следующим образом:

<input type="submit" onclick="seleccionarTodo()" value="Registrar factura"/>

И это успешно добавляет один за другим разные <select> <option> в массив