简体   繁体   English

从数据库中的值设置选择列表

[英]Setting a select list from values in a database

I have 2 select lists, one naming products and another for quantities.我有 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. I would like it so when a product is chosen, the corresponding quantity from the database will be set accordingly.

So if there was a record that customer Billy had bought 5 Pink Fish, when I select Pink Fish, the quantity select list will change to 5.所以如果有客户Billy购买了5条粉红鱼的记录,当我选择粉红鱼时,数量选择列表会变成5条。

This would be for use in a PHP form using a MySQL database.这将用于使用 MySQL 数据库的 PHP 表单。

Is such functionality possible, and if so how would I go about doing it?这样的功能是否可行,如果可以,我将如何去做?

You might want to google for ajax requests.您可能想在 google 上搜索 ajax 请求。 What it does is detecting a change (in your case) through javascript, send the value you selected to another php script which should do a sql query to return the quantity.它所做的是通过 javascript 检测更改(在您的情况下),将您选择的值发送到另一个 php 脚本,该脚本应该执行 sql 查询以返回数量。 The ajax request will catch the returned value and through javascript again change the value from the select dropdown. ajax 请求将捕获返回的值,并通过 javascript 再次更改选择下拉列表中的值。

All this would happen in the background and your site wouldn't refresh.所有这一切都将在后台发生,您的网站不会刷新。

If you are not very used to javascript you can have a look at the jquery framework, which makes this task a bit easier, and with a lot of examples documented.如果您不是很习惯 javascript,您可以查看jquery框架,它使这项任务更容易一些,并且记录了很多示例。

I didn't paste any code because assume you are not familiar with javascript/jquery/ajax.我没有粘贴任何代码,因为假设您不熟悉 javascript/jquery/ajax。 You might want to read a bit of documentation and play around a bit, and come back when you have a concrete problem, that would be the normal workflow here in Stackoverflow.您可能想阅读一些文档并稍微玩一下,然后在遇到具体问题时回来,这将是 Stackoverflow 中的正常工作流程。

Edit: (some code as requested by OP) Javascript:编辑:(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 (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);
    }
?>

It's a basic code, it still would need to catch some errors for the database or return a different status.这是一个基本代码,它仍然需要捕获数据库的一些错误或返回不同的状态。 But basically that's it.但基本上就是这样。 I didn't even test that code so use it as a guideline only.我什至没有测试该代码,因此仅将其用作指南。

Change <select name="fish" id="fish"> to <select name="fish" id="fish" onchange="getQuantity(this.value);"><select name="fish" id="fish">更改为<select name="fish" id="fish" onchange="getQuantity(this.value);">

Declare the following function in javascript:在 javascript 中声明以下函数:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM