Динамическое обновление выпадающего списка на основе предыдущего выбора с помощью PHP PDO

Question

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

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

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

HTML:

<div class="form-group row">
    <label class="col-sm-2 form-control-label" onchange="productorInfo(this.value);">Codigo Productor (*)</label>
    <div class="col-sm-4">
        <select name="vendedor_codigo">
            <?php foreach ($dd_productor_result as $dd_productor_display) : ?>
            <option value="<?= $dd_productor_display['vendedor_codigo']; ?>">
                <?= $dd_productor_display['vendedor_codigo']; ?>
            </option>
            <?php endforeach; ?>
        </select>
    </div>
    <label class="col-sm-2 form-control-label">Nombre (*)</label>
    <div class="col-sm-4">
        <select id="ajax-vendedor" name="vendedor_nombre">
            <?php foreach ($ajax_productor_result as $dd_productor_display) : ?>
            <option placeholder="Seleccione codigo" value="<?= $dd_productor_display['vendedor_nombre']; ?>">
                <?= $dd_productor_display['vendedor_nombre']; ?>
            </option>
            <?php endforeach; ?>
        </select>
    </div>
</div>

Ajax-скрипт:

function productorInfo(id) {
    $.ajax({
        type: "GET",
        url: "/controller/produccion/db_ajax_update.php",
        data: "mainid =" + id,
        success: function (result) {
            $("#ajax-vendedor").html(result);
        }
    });
};

Первый выпадающий код PHP:

$dd_productor = "SELECT vendedor_codigo FROM lista_productores";

$productor_stmt = $pdo->prepare($dd_productor);
$productor_stmt->execute();
$dd_productor_result = $productor_stmt->fetchAll();

Второй выпадающий список (вызов ajax):

if(isset($_GET['mainid'])){
productorInfo($_GET['mainid']);
$prod_value = productorInfo($_GET['mainid']);
}
$ajax_productor = "SELECT vendedor_nombre FROM lista_productores WHERE vendedor_codigo = {$prod_value}";

$productor_stmt = $pdo->prepare($ajax_productor);
$productor_stmt->execute();
$ajax_productor_result = $productor_stmt->fetchAll();

Answer 1

вызов onchange должен быть на элементе select, а не на ярлыке

<label class="col-sm-2 form-control-label">Codigo Productor (*)</label>
<select name="vendedor_codigo onchange="productorInfo(this.value)">

Но мне также кажется, что вы не совсем понимаете этот процесс. Ваш вызов ajax не будет запущен при загрузке страницы, поэтому этот бит:

<select id="ajax-vendedor" name="vendedor_nombre">
            <?php foreach ($ajax_productor_result as $dd_productor_display) : ?>
            <option placeholder="Seleccione codigo" value="<?= $dd_productor_display['vendedor_nombre']; ?>">
                <?= $dd_productor_display['vendedor_nombre']; ?>
            </option>

я бы подумал, что дает вам неопределенные предупреждения о переменных (если вы не установили $ajax_productor_result изначально каким-то образом)

Ответы от ajax обычно выводятся в .js через success: function

(result) {
            $("#ajax-vendedor").html(result);
        }

Исходя из этого, хотя - если нет больше кода, чем было опубликовано, вы передаете функции .html () массив или строки базы данных, поэтому она никогда ничего не отобразит.

так что вам нужно 1) нарисуйте выборку без опций при загрузке страницы (или опциями по умолчанию, если они у вас есть) 2) вернуть ответ, который может использовать функция успеха, например, JSON-строка, которую JQuery может разобрать 3) отформатируйте данные в jquery в <options> и затем используйте функцию .html() для обновления выбора 4) если вы хотите, чтобы это произошло при начальной загрузке страницы, добавьте в документ вызов готовности к функции productorInfo(id) - это будет уместно, если вы каким-либо образом устанавливаете начальное значение выбора (поэтому оно может не относиться к вы)