Question

我正在尝试创建依赖下拉列表，其中一个人可以根据南，北，东，西等地区选择特定商店。我创建了一个数据库，其中存在4列，如id，region_id，region，store name。我有2个下拉菜单，一个显示区域，另一个显示商店名称。两者都是从数据库中调用的。区域下拉列表显示所有区域。但商店名称为空白。我试图按区域ID获取商店。如果region_id ==''那么它将调用select查询，其中region_id获得匹配。如果我做错了什么我需要帮助。这就是为什么我没有得到结果。

代码： dashboard.php

<tr>
    <th>
    <label for="inputPassword3" class="col-md-5 control-label">Date</label>
        <div class="col-md-6">
            <input type="date" class="form-control  c-square c-border-2px c-theme" id="inputEmail3-55" placeholder="" name="date"> 
        </div>
    </th>
    <th> 
        <div class="form-group">
        <label for="inputPassword3" class="col-md-3 control-label">Region</label>
            <div class="col-md-6">
                <select class="form-control  c-square c-border-2px c-theme" name="region" id="region">
                <?php 
                    $sql = mysqli_query($link, "SELECT DISTINCT region FROM store_details");
                    while ($row = $sql->fetch_assoc()){
                    echo "<option value=\"owner1\">" . $row['region'] . "</option>";
                    }
                ?>
                </select>
            </div>
        </div>
    </th>
    <?php $region_id =(isset($_POST['region_id']));{
            echo $region_id;
    }?>
    <th>
        <div class="form-group">
            <label for="inputPassword3" class="col-md-6 control-label">Store Name</label>
                <div class="col-md-6">
                    <select class="form-control  c-square c-border-2px c-theme" name="store_details" id="states-list">
                    <option value=''>Select Store</option>
                    </select>
                </div>
        </div>
    </th>
</tr>

SerachRegion.php

<?php
    require_once('DbConnection.php');
    if(isset($_POST['region_id'])){
    $region_id =$_POST['region_id'];
}
    if($region_id!=''){
        $states_result = $conn->query('select * from store_details where region_id='.$region_id.'');
        $options = "<option value=''>Select store</option>";
        while($row = $states_result->fetch_assoc()){
            $options .= "<option value='".$row['region_id']."'>".$row['name']."</option>";
        }
        echo $options;
        }
?>

Ajax代码：

<script>
$('#region').on('change', function(){
var region_id = $(this).val();
$.ajax({
type: "POST",
url: "SearchRegion.php",
data:{region_id:region_id},
success: function(result){
$("#states-list").html(result);
}
});
});

</script>

我已经检查过DbConnection.php文件，它工作正常。问题是：enter image description here

商店名称下拉列表为空白。我没有收到任何错误。

Answer 1

在PHP函数中，检查post值的isset。如果检查isset，则仅对该变量返回true或false。

例如：

$expected_array_got_string = 'somestring';
var_dump(isset($expected_array_got_string['some_key']));

输出将是：

bool(true)

所以你需要改变你的变量声明，如：

    if(isset($_POST['region_id'])){
       $region_id =$_POST['region_id'];
    }

在你的Ajax中你需要获得这种类型的值：

$('#region').on('change', function(){
        var region_id = $(this).val();
        $.ajax({
          type: "POST",
          url: "SearchRegion.php",
          data:{region_id:region_id},
          success: function(result){
            $("#states-list").html(result);
        }
        });
    });

<强>编辑：

这是从我的结尾测试的：示例代码是

test1.php

<html>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</html> 
<select id="_city">
    <option value="1">
        ONE
    </option>
    <option value="2">
        TWO
    </option>
    <option value="3">
        THREE
    </option>
</select>

<select name="store_details" id="states-list">
    <option value=''>Select Store</option>
</select>
<script>    
 $(document).ready(function () {
    $('#_city').on('change', function(){
          var region_id = this.value;
          $.ajax({
          type: "POST",
          url: "change.php",
          data:{region_id : region_id},
          success: function(result){
                $("#states-list").html(result);
            }
        });
    });
 });
</script>

change.php

<?php

if(isset($_POST['region_id'])){
       $region_id =$_POST['region_id'];
       echo '<option value="'.$region_id.'">'.$region_id.'</option>' ;

       exit;
    }
?>

尝试使用此方法进行ajax调用

Answer 2

成功调用检查结果是否为空，然后将结果附加到id 当您更改时，首先清除最旧的状态，以便新值出现在该位置

<script>
$('#region').on('change', function(){
    $("#states-list").html(''); // empty the currnt values
        var region_id = this.value;
        $.ajax({
        type: "POST",
        url: "SearchRegion.php",
        data:'region_id='+region_id,
        success: function(result){
        $("#states-list").append(result); // then append new values
        }
    });
});
</script>

依赖下拉列表未显示下拉列表数据

2 个答案: