Javascript ajax调用时未触发更改事件

在下面的代码中，我有一个从listplace.php'填充的下拉id名称。还进行了另一个ajax调用，当选择下拉项时，它将列出dataprod.php中的特定产品`

问题：当我单击下拉列表中的特定项时，它不会触发Ajax事件

我检查了dataprod.php，它工作正常，但即使在用下拉框绑定了更改事件之后，我也没有得到结果。请帮忙

<select id="name">
  <option selected disabled>Please select</option>
</select>

<?php if (isset($_GET['place']) && $_GET['place'] != '') { ?>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $.ajax({
            type: "POST",
            data: {place: '<?= $_GET["place"] ?>'},
            url: 'listplace.php',
            dataType: 'json',
            success: function (json) {
                if (json.option.length) {
                    var $el = $("#name"); 
                    $el.empty(); // remove old options
                    for (var i = 0; i < json.option.length; i++) {
                        $el.append($('<option>',
                            {
                                value: json.option[i],
                                text: json.option[i]
                            }));
                    }
                }else {
                    alert('No data found!');
                }
            }
        });
    </script>

<script>
$(document.body).on('change',"#name",function (e) {
   //doStuff
  var name1 = this.value;
 $.ajax ({
     data: {name1: '<?= $_GET["name1"] ?>'},
     url: 'dataprod.php',
     success: function (response) {
         console.log(response);

    $('.products-wrp').html('');
    $('.products-wrp').hide();
    $('.products-wrp').html(response);
    $('.products-wrp').show();            
        },

    });
</script>     
<?php } ?>

dataprod.php

<?php
include("config.inc.php");
$name1 = $_POST['name1'];
$results = $mysqli_conn->query("SELECT product_name, product_desc, product_code,  
product_image, product_price FROM products_list where product_name='$name1'");

$products_list =  '<ul id ="products_list" class="products-wrp">';
while($row = $results->fetch_assoc()) {
$products_list .= <<<EOT
<li>
<form class="form-item">
<h4>{$row["product_name"]}</h4>
<div>
<img src="images/{$row["product_image"]}" height="62" width="62">
</div>
<div>Price : {$currency} {$row["product_price"]}<div>
</form>
</li>
EOT;
}
$products_list .= '</ul></div>';
echo $products_list;
?>      

---

您需要在ajax调用中传递所选的值

将此行从

var name1 = this.value;
 $.ajax ({
     data: {name1: '<?= $_GET["name1"] ?>'},

HTML: 您可以将值存储在隐藏字段中，如：

<input type='hidden' name='name1' id='name1' value='<?= $_GET["name1"] ?>'>

Javascript:

$(document.body).on('change',"#name",function (e) {
   //doStuff
  var name1 = $('#name1').val();
 $.ajax ({
     data: {name1: '<?= $_GET["name1"] ?>'},
     url: 'dataprod.php',
     success: function (response) {
         console.log(response);

    $('.products-wrp').html('');
    $('.products-wrp').hide();
    $('.products-wrp').html(response);
    $('.products-wrp').show();            
        },

    });

---

我更改了它，但仍然没有得到结果；显示？如果在ajax调用后显示为空，那么您可能必须检查sql$results并调试它，看看值是否正确。您可以在这一行$name1=$\u POST['name1']后回显结果$name1；我回显$name1，但不显示。。希望问题出在我的$name1did中，您是否在onchange jquery中发出警报？警报正在触发？

$(document.body).on('change',"#name",function (e) {
   //doStuff
  var name1 = $('#name1').val();
 $.ajax ({
     data: {name1: '<?= $_GET["name1"] ?>'},
     url: 'dataprod.php',
     success: function (response) {
         console.log(response);

    $('.products-wrp').html('');
    $('.products-wrp').hide();
    $('.products-wrp').html(response);
    $('.products-wrp').show();            
        },

    });