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

Question

I am trying to implement dependent dropdown using ajax and php. But anyhow the response from second dropdown is not coming. after checking in console, I am able to see the id of first dropdown but no response from second dropdown. So, When i click on first dropdown, I just get a blank value in Second dropdown.

HTML Code

 <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

Try below code,

 $(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

varient_id & veriant_id on the POST is wrong (the e & a difference).

$varient_id = $_POST['veriant_id']; should be $varient_id = $_POST['varient_id'];