Question

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

我想要做的是：我正在构建一个网页，其中包含两个相关的下拉列表;第二个值取决于第一个选择。第一个是＆＃34;产品＆＃34;，第二个是＆＃34;尺寸＆＃34; ...到目前为止，非常好。每个列表中包含的选项最终来自数据库 - 产品列表如下：

<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>';
?>

我现在在列表中唯一的选择是＆＃34; - 请选择 - ＆＃34;选项...对不起，如果我已经偏离了这个!!

非常感谢

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的确切元素，类似于您构建产品列表的方式。

PHP依赖下拉列表

修改

2 个答案: