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

varient_id＆amp; POST上的veriant_id是错误的（e＆amp; a difference）。

$ varient_id = $ _POST [＆＃39; veriant_id＆＃39;];应该是$ varient_id = $ _POST [＆＃39; varient_id＆＃39;];

PHP Ajax依赖下拉列表无法正常工作

2 个答案: