Bootstrap-select 在 php 中使用 GET 时要包含的下拉选项

Question

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

我想做的是，使用 PHP 的 GET 函数，当用户单击 "Add to Cart" 按钮。理想情况下，我会有一个变量，在这种情况下为 $x，并将其设置为默认值 1。然后，如果用户更改下拉列表（select 选择器）的值，它将更新$x 变量来保存该产品的新金额。然后当用户点击添加到 Cary 按钮时，它会使用产品 ID 执行，然后是金额。

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

我不确定如何处理这个问题，我考虑过在单击时监听 JS 事件，因为 bootstrap-select 有关于它的文档 https://silviomoreto.github.io/bootstrap-select/options/#events，但是我仍然不知道如何将下拉框的值获取到我的 addtocart.php.

下面我添加了下拉框的代码，以及我尝试使用的一堆 JS 脚本，看看它们是否被调用过。据我所知，其中 None 个被调用了，我也不知道为什么，但是如果我能找到一种不用 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

把link改成一个按钮（我用的是'cart-button'class）

<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;
    });

Bootstrap-select 在 php 中使用 GET 时要包含的下拉选项

Bootstrap-select dropdown option to be include when using GET in php

javascript

php

jquery

bootstrap-4

bootstrap-select