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 匹配的一行...。因此沒有可用的選項。 在所有情況下，您只會得到一行作為輸出。