PHP Ajax依賴下拉列表不起作用

Question

我正在嘗試使用ajax和php實現依賴下拉列表。 但是無論如何，第二個下拉列表的響應不會到來。 在控制台中簽入后，我可以看到第一個下拉列表的ID，但是第二個下拉列表沒有任何響應。 因此，當我單擊“第一個”下拉列表時，我在“第二個”下拉列表中僅得到一個空白值。

HTML代碼

 <div class="col-md-6">
                                                    <?php
                                                    require_once('db.php');
                                                    $varient_result = $conn->query('select * from tv_varient');
                                                    ?>
                                                    <select name="varient" id="varient-list" class="form-control  c-square c-theme" required>
                                                        <option value="">Select Varient</option>
                                                        <?php
                                                            if ($varient_result->num_rows > 0) {
                                                            // output data of each row
                                                            while($row = $varient_result->fetch_assoc()) {
                                                        ?>
                                                        <option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
                                                        <?php
                                                        }
                                                        }
                                                        ?>
                                                    </select>
                                                 </div>    
                                                    </br></br>

                                                        <label for="inputPassword3" class="col-md-4 control-label" style="margin-left: 15px;">Price:</label>
                                                            <div class="col-md-6">
                                                                <select name="price" id="price-list" class="form-control  c-square c-theme" required>
                                                                    <option value=''>Select Price *</option>
                                                                </select>
                                                            <div>
                                                                </div>
                                                       </div>
                                                  </div>
                                                    </div> 
                                                </div>

AJAX Code
                                                         <script>
                                                                $('#varient-list').on('change', function(){
                                                                 var varient_id = this.value;
                                                                 $.ajax({
                                                                 type: "POST",
                                                                 url: "get_price.php",
                                                                 data:'varient_id='+varient_id,
                                                                 success: function(result){
                                                                 $("#price-list").html(result);
                                                                  }
                                                                 });
                                                                });
                                                            </script>

get_price.php

?php
require_once('db.php');
//$country_id = mysqli_real_escape_string($_POST['country_id']);
//var_dump($country_id);
//var_dump($_POST['country_id']);
$varient_id = $_POST['veriant_id'];
echo $varient_id;
//var_dump($varient_id);
var_dump($_POST['varient_id']);
if($varient_id!='')
{
    $states_result = $conn->query('select * from tv_price where veriant_id='.$varient_id.'');
    $options = "<option value=''>Select Price</option>";
    while($row = $states_result->fetch_assoc()) {

    $options .= "<option value='".$row['price']."'>".$row['price']."</option>";
    }
    echo $options;
}

?>

Answer 1

試試下面的代碼，

 $(document).on('change', '#varient-list', function(e) { var varient_id = this.value; $.ajax({ type: "POST", url: "get_price.php", data:'varient_id='+varient_id, success: function(result){ $("#price-list").html(result); } }); }); 

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

Answer 2

POST上的varient_id和veriant_id錯誤（e和差異）。

$ varient_id = $ _POST ['veriant_id']; 應該是$ varient_id = $ _POST ['varient_id'];