php依赖下拉列表获取选定值

Question

好的，我终于设法让它正常工作了，我不得不再次更改代码，但现在它主要以我想要的方式工作。

索引.php

<form role="form" method="post" action="">
<select id="products" name="products">
<?php 
    require 'bundle.php';
    $products = loadProducts();
    foreach ($products as $product) {
    echo "<option id='".$product['id']."' value='".$product['id']."' selected>".$product['name']."</option>";
}
?>
</select>
<select id="bundles" name="bundles">
</select>
</form>

脚本

<script type="text/javascript">
        $(document).ready(function(){
            $("#products").change(function(){
                var pid = $("#products").val();
                $.ajax({
                    url: 'data.php',
                    method: 'post',
                    data: 'pid=' + pid
                }).done(function(bundles){
                    console.log(bundles);
                    bundles = JSON.parse(bundles);
                    $('#bundles').empty();
                    bundles.forEach(function(bundle){
                        $('#bundles').append('<option>' + bundle.name + '</option>')
                    })
                })
            })
        })
    </script>

包.php

<?php 
    require 'conection.php';


    if(isset($_POST['pid'])) {
        $db = new DbConnect;
        $conn = $db->connect();

        $stmt = $conn->prepare("SELECT * FROM bundles WHERE pid = " . $_POST['pid']);
        $stmt->execute();
        $bundles = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($bundles);
    }

    function loadProducts() {
        $db = new DbConnect;
        $conn = $db->connect();

        $stmt = $conn->prepare("SELECT * FROM products");
        $stmt->execute();
        $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
        return $products;
    }

 ?>

好的，这是现在有效的代码，但我有一些问题，我仍然需要帮助：

1.) atm 当我加载页面时，它让我选择了最后一个选项，但我想选择第一个选项，而不必首先将选项设为<option selected="" disabled="">Select Product</option> ，我希望列表中的第一个选项是选择的 db 中的第一行 [已解决此部分]

2.) 我如何在 index.php 中显示选定的值，因为基于 2 个列表中的值，我需要从不同的表中获取不同的值，例如（第一个列表选择的值是：prodname 和第二个选择的列表是 7现在我需要 2 个值来获得第 3 个值，即 = prodname7)

Answer 1

我没有看到您实际将 id 传递到何处，以便 PHP 可以访问它。 我不是 PHP 专家，但我认为您只需将其添加为查询字符串，如下所示：

var prodID = $(this).val();
            if(prodID) {
                $.ajax({
                    url: "bundle.php?id="+prodID,
                    dataType: "json",
                    success:function(data) {

                        $('select[name="bundle"]').empty();
                        $.each(data, function(key, value) {
                            $('select[name="bundle"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });
                    }
                });
            }else{
                $('select[name="bundle"]').empty();
            }

Answer 2

我只想关闭这个话题，因为最初的问题与没有填充第二个列表有关，因为我解决了这个问题并且没有得到更新问题的任何答案，我认为这个话题没有意义了。

因此，如果有人想要类似的代码，我将发布相关下拉列表的工作代码的完整代码。

索引.php

<form role="form" method="post" action="">
<label for="products">Product</label>
<select id="products" name="products" class="user">
<?php 
    require 'data.php'; 
    $products = loadProducts();
    $select = ' selected';
    foreach ($products as $product) {
    echo "<option id='".$product['id']."' value='".$product['id']."'".$select.">".$product['name']."</option>";
$select = '';
}
?>
</select>
<label for="bundles">Bundle</label>
<select id="bundles" name="bundles">
</select>
<input type="submit" name="submit" id="submit"></input>
</form>

脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("select#products").change(function(){
                var products = $("select#products option:selected").val();
                $.ajax({
                    url: 'data.php',
                    method: 'post',
                    data: 'products=' + products
                    }).done(function(bundles){
                    console.log(bundles);
                    bundles = JSON.parse(bundles);
                    $('select#bundles').empty();
                    bundles.forEach(function(bundle){
                        $('select#bundles').append('<option>' + bundle.name + '</option>')
                    });
                });
            }).change();
        });
    </script>

数据.php：

<?php 
    require 'DbConnect.php';

    if(isset($_POST['products'])) {
        $db = new DbConnect;
        $conn = $db->connect();



        $stmt = $conn->prepare("SELECT * FROM bundles WHERE pid = " . $_POST['products']);
        $stmt->execute();
        $bundles = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($bundles);
    }

    function loadProducts() {
        $db = new DbConnect;
        $conn = $db->connect();

        $stmt = $conn->prepare("SELECT * FROM products");
        $stmt->execute();
        $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
        return $products;
    }

 ?>

对于看起来像的数据库：

products:
id,name

bundles:
id,pid,name

因此，这是使用 php 和 ajax 从数据库填充的依赖下拉列表的工作代码，其中第二个列表由第一个选择定义，列表加载页面并立即在下拉列表中显示结果。 我确实希望它可以帮助一些人。 感谢所有回答这个话题并帮助我让它正常工作的人。

Answer 3

您没有任何选择，因为根据您的代码，您的 $_POST['prodid'] 始终为空。 你可以通过

echo $_POST['prodid']

作为 php 开头标记下方的第 2 行

解决方法：

1. 方法 POST 取自表单标记，而不是来自 ajax 调用。 因此，您需要将 jquery ajax 信息作为 formdata 传递，以便您的 $_POST 将在 bundle.php 中捕获

如何在 jQuery 中使用 Ajax 请求发送 FormData 对象？

或者

2. 使用 file_get_contents 并获取您的数组

如何在php中获取POST的正文？

$post= json_decode(file_get_contents('php://input'), true);

echo $post['prodid']; // verify you get prodid here.

或者

echo $post->prodid; // verify you get prodid here. 

任何一个都行

最重要的是，在 bundle.php 中，您试图仅填充与 prodid 匹配的一行...。因此没有可用的选项。 在所有情况下，您只会得到一行作为输出。