Javascript php相关下拉列表获取选定值

好了，伙计们，我终于设法让它正常工作了。我不得不再次修改代码，但现在它基本上按照我想要的方式工作

index.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>

bundle.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;
    }

 ?>

好的，这是现在可以使用的代码，但是我还有一些问题需要帮助：

一,。atm当我加载页面时，它会让我选择最后一个选项，但我希望选择第一个选项，而不必首先选择一个选项作为选择产品，我希望列表中的第一个选项是db中选择的第一行[已解决此部分]

---

二,。如何在index.php中显示所选值，因为基于两个列表中的值，我需要从不同的表中获取不同的值。例如，第一个列表中的选定值是：prodname，第二个列表中的选定值是7。现在，我需要这两个值来获取第三个值，即=prodname7

，我看不出您实际在哪里传递该值这样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();
            }

---

您没有得到任何选项，因为根据您的代码，$\u POST['prodid']始终为空。 您可以通过以下方式进行验证：

echo $_POST['prodid']

如php开始标记下面的第2行所示

解决办法：

POST方法取自表单标记，而不是ajax调用。因此，您需要将jQueryAjax信息作为formdata传递，以便$\u帖子将捕获到bundle.php中 或

使用文件获取内容并获取数组 或

任何一个都可以

最重要的是，在bundle.php中

---

您正在尝试只填充一个与prodid匹配的行。。。。因此没有选择。在所有情况下，您将只获得一行作为输出。

我只想结束本主题，因为原始问题与未填充第二个列表有关，因为我解决了该问题，并且未获得更新问题的任何答案。我认为本主题不再有意义

因此，如果有人想要类似的代码，我将发布一个依赖下拉列表的工作代码的完整代码

Index.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>

---

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

感谢您的快速回复，但我也尝试了添加+prodID，但仍然没有帮助，因为我仍然在捆绑列表中获得了其他值。顺便说一句，我稍微更改了代码以传递id，但现在似乎捆绑列表根本没有填充。请尝试使用其中prod_id='.$获取['id'。。不要像在查询中一样，还要检查您的查询是否有id值i did try=但这会使捆绑包列表根本无法填充。我确实尝试了很多东西，但似乎无法找出我缺少了什么，或者哪里有错。$\u GET['id']中有什么？你试着打印了吗？它包含必需的id吗？所以我修改了代码以正确获取id，但现在似乎捆绑列表根本没有填充感谢您的回复，我以不同的方式修改了代码，现在它主要以我想要的方式工作。如果您能检查更新的问题，看看您是否能提供帮助，我将非常感谢

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

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