在 php 中使用 GET 时要包含的引导选择下拉选项

Question

所以我正在尝试制作一个产品页面，其中有一个项目的下拉菜单和一个将其添加到购物车的按钮。现在，我从 MySQL 数据库中获取了有价值的产品，并遍历所有值以创建产品表。下拉菜单也是从 MySQL 数据库中填充的。

我想要做的是，使用 PHP 的 GET 函数，让用户从下拉框中选择的值在用户单击“添加到购物车”按钮时显示出来。理想情况下，我将有一个变量，在这种情况下为 $x，并将其设置为默认值 1。然后，如果用户更改下拉列表的值（选择选择器），它会将 $x 变量更新为持有该产品的新金额。然后当用户点击添加到卡里按钮时，它会执行产品的 ID，后跟金额。

IE) addtocart.php?id=12&amount=3

我不完全确定如何解决这个问题，我考虑过在单击 JS 事件时监听它，因为 bootstrap-select 上有文档 https://silviomoreto.github.io/bootstrap-select/options/#events ，但我仍然不知道如何获取下拉框添加到我的 addtocart.php。

下面我添加了下拉框的代码，以及我尝试使用的一堆 JS 脚本，以查看它们是否被调用过。据我所知，他们都没有被调用，我也不能完全弄清楚为什么，但是如果我能找到一种没有 JS 的方法来做到这一点，那将是更可取的，因为我知道 JS 是客户端，PHP 是服务器。

谢谢你，任何帮助将不胜感激。

while($r = mysqli_fetch_assoc($res)){
            if ($counter % 3 == 0){
                echo '</div>';
                echo '<div class="card-deck mb-3 text-center">';
            }
            $counter++;
            echo '<div class="card mb-4 box-shadow">';
            echo '<div class="card-header">';
            echo ' <h4 class="my-0 font-weight-normal">'.$r['name'].'</h4>';
            echo '</div>';
            echo '<div class="card-body">';
            echo '<img class="rounded-circle" src="'.$r['image'].'" alt="'.$r['name'].'" width="140" height="140">';

            echo '<div>';
            echo '<select class="selectpicker show-tick" data-style="btn-info" data-width="50%">';
            echo '<option value="1"><h1>$'.$r[price_1].' @ 1</h1></option>';
            echo '<option value="2"><h3>$'.$r[price_2].' @ 2</h3></option>';
            echo '<option value="3"><h3>$'.$r[price_3].' @ 3</h3></option>';
            echo '<option value="4"><h3>$'.$r[price_4].' @ 4</h3></option>';
            echo '<option value="5"><h3>$'.$r[price_5].' @ 5</h3></option>';
            echo '<option value="6"><h3>$'.$r[price_6].' @ 6</h3></option>';
            echo '</select>';
            echo '</div>';
            echo '<p class="card-text">'.$r['description'].'</p>';

            //Help here, trying to get the value from the selected value into the $x variable.

            echo '<p><a href="addtocart.php?id='.$r[id].'&amount='.$x.'" class="btn btn-lg btn-block btn-outline-primary" role="button">Addd to Cart</a></p>';
            echo '</div>';
            echo '</div>';
         }

<script>
    $(document).ready(function() {
        $('.selectpicker').selectpicker({
            style: 'btn-info',
            size: 4
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('.selectpicker').on('click', function () {
            var p1 = "suc1";
            alert($(this).val());
            console.log($(this).val());
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('.selectpicker').on('change', function () {
            var p1 = "suc2";
            var selected = []
            selected = $('.selectpicker').val()
            console.log(selected); //Get the multiple values selected in an array
            console.log(selected.length); //Length of the array
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('.selectpicker').on('changed.bs.select', function (e) {
            alert("Hi");
        });
    });
</script>

Answer 1

将链接更改为按钮（我使用了“购物车按钮”类）

<p><button data-rid="<? $r['id']; ?>" class="cart-button btn btn-lg btn-block btn-outline-primary" type="button">Add to Cart</button></p>

我在您的按钮上添加了data 属性来保存“id”变量

JS 将获取选定的选项和 id，然后将用户发送到该位置。 javascript：

    $("body").on("click", ".cart-button", function () {
        var selected = $('.selectpicker').val();
        var rid = $(this).data("rid");
        location.href = "addtocart.php?id=" + rid + "&amount=" + selected;
    });