從數據庫中的值設置選擇列表

Question

我有 2 個選擇列表，一個命名產品，另一個命名數量。

<select name="fish" id="fish">
    <option value="blueFish">Blue Fish</option>
    <option value="redFish">Red Fish</option>
    <option value="pinkFish">Pink Fish</option>
    <option value="greenFish">Green Fish</option>
</select>

<select name="numFish" id="numFish">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
   <option value="6">6</option>
</select>

I would like it so when a product is chosen, the corresponding quantity from the database will be set accordingly.

所以如果有客戶Billy購買了5條粉紅魚的記錄，當我選擇粉紅魚時，數量選擇列表會變成5條。

這將用於使用 MySQL 數據庫的 PHP 表單。

這樣的功能是否可行，如果可以，我將如何去做？

Answer 1

您可能想在 google 上搜索 ajax 請求。 它所做的是通過 javascript 檢測更改（在您的情況下），將您選擇的值發送到另一個 php 腳本，該腳本應該執行 sql 查詢以返回數量。 ajax 請求將捕獲返回的值，並通過 javascript 再次更改選擇下拉列表中的值。

所有這一切都將在后台發生，您的網站不會刷新。

如果您不是很習慣 javascript，您可以查看jquery框架，它使這項任務更容易一些，並且記錄了很多示例。

我沒有粘貼任何代碼，因為假設您不熟悉 javascript/jquery/ajax。 您可能想閱讀一些文檔並稍微玩一下，然后在遇到具體問題時回來，這將是 Stackoverflow 中的正常工作流程。

編輯：（OP 要求的一些代碼）Javascript：

$('#fish').change(function(){
    var fishType = $('#fish select option:selected');
    $.ajax("getQuantity.php", {fish: fishType}, function(data){
        data = JSON.parse(data);
        if(data.status == "OK"){
            var quantity = data.quantity;
            $('#numFish option[value='+quantity+']').prop("selected", true);
        } else {
            alert("error");// or console.log(), whatever you prefer
        }
    }
});

php (getQuantity.php):

<?php
    $fish = $_POST['fish']; //getting the fish type
    $sql = "your SQL to select the fish quantity for that type";
    $result = mysqli_query($mysqli, $sql);

    if(mysqli_num_rows($result)>0){
        $row = mysqli_fetch_assoc($result);
        $data = array("status" => "OK", "quantity" => $row['quantity']); // you can just output a string with the number if you want, but this way you have more control and better debugging.
        echo json_encode($data);
    }
?>

這是一個基本代碼，它仍然需要捕獲數據庫的一些錯誤或返回不同的狀態。 但基本上就是這樣。 我什至沒有測試該代碼，因此僅將其用作指南。

Answer 2

將<select name="fish" id="fish">更改為<select name="fish" id="fish" onchange="getQuantity(this.value);">

在 javascript 中聲明以下函數：

function getQuantity( o ) {
   // get the quantity from the database using ajax,
   // and set the quantity dropdown here.
}