更改事件未在Ajax調用上觸發

Question

在下面的代碼中，我有一個從listplace.php'. Also made another ajax call which when the dropdown item is selected it lists the specific product from填充的下拉列表(id-name) listplace.php'. Also made another ajax call which when the dropdown item is selected it lists the specific product from listplace.php'. Also made another ajax call which when the dropdown item is selected it lists the specific product from dataprod.php listplace.php'. Also made another ajax call which when the dropdown item is selected it lists the specific product from

問題：當我從下拉列表中單擊特定項目時，它不會觸發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;
?>      

Answer 1

您需要在ajax調用中傳遞選定的值。

更改此行從

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

至

 var name1 = this.value;
 $.ajax ({
     data: {name1: name1},
     type: 'POST',

Answer 2

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();            
        },

    });