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

Question

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

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

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

我不确定如何解决这个问题，我想过在单击 JS 事件时收听 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>

我向您的按钮添加了数据属性以保存“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;
    });