PHP 相关下拉列表

Question

我知道已经发布了几个与相关下拉列表相关的类似问题，但我找不到我正在寻找的答案 - 如果它已经被涵盖，请道歉！

我要做的是：我正在构建一个网页，其中包含两个相关的下拉列表；第二个的值取决于第一个的选择。第一个是“产品”，第二个是“尺寸”......到目前为止，一切都很好。每个列表中包含的选项最终都来自一个数据库——产品列表如下：

<select id="product-list">
    <option value="0">-- Please Select --</option>
    <?php
        if ($res2 = mysqli_query($con,$getproducts)) {
            while($row2 = mysqli_fetch_row($res2)){
                $pid= $row2[0];
                $pname= $row2[1];
                echo "<option value='" . $pid . "'>" . $pname . "</option>";
            }
        }
    ?>
</select>

这个工作得很好，所以没有问题。但是，我很难理解第二个列表...

检索尺寸的查询是这样的：

$getsizes = "SELECT productid,displayname,price from productsizelookup where formatid = $formatid";

我只有两个产品（目前），所以这个查询将检索所有可能的尺寸，所以我现在需要的是这个查询中的一个记录子集，基于由选项中的选项值提供的产品 ID首先选择列表。

我不知道这是否需要对数据库进行另一次查询，而且我在某处读到了可能需要 AJAX 的信息。有没有人能够提供帮助，或者在正确的方向上轻轻推动？

编辑

我尝试添加一个 div 块，如下所示，我希望下拉菜单出现：

<div id="wrap_size"></div>

然后在页面底部添加以下脚本：

<script type="text/javascript">
    $(document).on('change', '#product-list', function(e) {
        var pid = $(this).val();
        var data = {'pid':pid};
        var url = 'size.php';
        $.post(url, data, function(res) {
            $('#wrap_size').html(res);
        });
    });
</script>

最后，我的 size.php 文件：

<?php

include("include/dbvariables.php");

$con=mysqli_connect($host,$username,$password,$database);
if (mysqli_connect_errno()){
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$pid = !empty($_POST["pid"]) ? $_POST["pid"] : 0;

$getsizes = "SELECT productid,displayname,price from productsizelookup where formatid = $formatid and productid = $pid";

echo '<select id="size-list">';
echo '<option>-- Please Select --</option>';

if ($res3 = mysqli_query($con,$getsizes)) {
    while($row3 = mysqli_fetch_row($res3)){
        $sid= $row3[0];
        $pid= $row3[1];
        $size= $row3[2];
        $price= $row3[3];
        echo '<option value="'.$sid.'">'.$size.'</option>';
    }
}
echo '</select>';
?>

我现在在列表中获得的唯一选项是“-- 请选择--”选项...抱歉，如果我对此不满意！

非常感谢

Answer 1

简而言之，我会怎么做：

我使用 jQuery 检查第一个选择列表的 onChange 事件。

$(document).on('change', '#product-list', function(e) { ... });

我得到选定的值并通过 jquery AJAX 调用将其作为数据传递给服务器端脚本。

var pid = $(this).val();
var data = {'pid':pid};
var url = 'select_size.php';
$.post(url, data, function(res) {
    $('#wrap_size').html(res);
});

脚本使用选定的值进行 SQL 调用以获取第二个选择列表的选项值。

$pid = !empty($_POST["pid"]) ? $_POST["pid"] : 0;

// SQL QUERY HERE, CONSTRUCT SELECT LIST

脚本随后为第二个选择列表构造并回显 HTML。

然后将 AJAX 调用的这个结果写入容器 div '#wrap_size'，第二个选择列表应该出现在该容器中。

编辑：

如果在调用页面创建$formatid并在size.php脚本中使用，则需要像pid一样通过。

将您的 javascript 更改为：

var data = {'pid':pid, 'formatid':<?php $formatid; ?>};

或者创建一个值为$formatid的隐藏输入，并读取该值：var formatid = $('input:hidden[name=formatid]').val(); var data = {pid:pid, formatid:formatid};

当然，您还必须在脚本中读取它的值：

$formatid = !empty($_POST["formatid"]) ? $_POST["formatid"] : 0;

Answer 2

你有这段 html：

<select name="first" id="first"><option value="1">1</option><option value="2">2</option></select>
<select name="second" id="second"><!-- to be updated --></select>

我会给出一个 jquery 的例子，因为它更小：

<script type="text/javascript">
    $('#first').on('change', function() {
       // ajax request to your page that returns the sizes
       if($(this).val()) {
           $.get('/my/sizes/' + $(this).val(), function(data) {
              $('#second').html(data);
           });
       }
    });
</script>

然后，“/my/sizes/product_id”页面应返回基于该产品 ID 的确切元素，类似于您构建产品列表的方式。