单商品POS系统扩展多商品选择及对应数量输入实现方案咨询

实现方案选择 #

这个功能优先使用jQuery实现，PHP是服务端运行的语言，无法实现选择商品后实时更新页面的交互效果，除非每次选择都触发页面刷新，使用体验极差。jQuery作为前端JS库，专门处理这类客户端动态交互场景，是最合适的选择。

具体实现思路 #

1. 调整原有HTML结构 #

• 移除原有的全局数量输入框，新增一个专门用于放置动态商品区块的容器
• 将表单提交时的参数名改为数组格式，避免多值提交时被覆盖
• 修正原有select标签重复定义class属性的问题

2. 编写jQuery交互逻辑 #

• 监听多选下拉框的change事件，每次用户选择/取消选择商品时触发
• 每次触发事件后先清空容器内已有的旧区块，避免重复生成
• 遍历所有当前选中的option，拿到对应商品ID和商品名称，为每个商品生成独立的展示区块，区块内包含商品名展示、隐藏的商品ID输入框、对应数量输入框

3. 调整后端PHP接收逻辑 #

• 表单提交后，拿到的product_id和quantity都是数组格式，相同下标的值互相对应
• 循环数组即可批量获取所有选中商品的ID和对应数量，完成后续的订单录入逻辑

完整修改后的代码示例 #

<form method="POST" style="width:60%;margin-left:200px">
  <div class="form-group">
    <label>Choose Product:</label>
    <select name="product_id" class="form-control select" id="select_items" multiple > 
      <option disabled>-- Select Product --</option>
      <?php
          $db = mysqli_connect('localhost', 'root', '', 'login');
          $records = mysqli_query($db, "SELECT * From products where deleted=0");
          while($data = mysqli_fetch_array($records))
          {
            echo "<option value='". $data['id'] ."' >" .$data['name'] ."</option>";
          }  
      ?>  
    </select>
  </div>
  <!-- 动态商品区块容器 -->
  <div id="product_list" class="form-group"></div>
  <button class="btn" name="submit-product" type="submit" ID="btnClick" >Submit</button> 
</form>

<!-- 引入jQuery，如果你项目已经引入过可以删掉这行 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function(){
  // 监听下拉框选择变化
  $('#select_items').on('change', function(){
    // 清空原有区块
    $('#product_list').empty();
    // 遍历所有选中的商品
    $(this).find('option:selected').each(function(){
      let prodId = $(this).val();
      let prodName = $(this).text();
      // 生成单个商品区块
      let itemHtml = `
        <div class="product-item" style="margin: 10px 0; padding: 10px; border: 1px solid #eee;">
          <span>商品名称：${prodName}</span>
          <input type="hidden" name="product_id[]" value="${prodId}">
          <label style="margin-left: 20px;">数量：</label>
          <input type="number" name="quantity[]" min="1" placeholder="输入数量" required>
        </div>
      `;
      $('#product_list').append(itemHtml);
    });
  });
});
</script>

后端PHP接收示例（提交后处理逻辑） #

<?php
if(isset($_POST['submit-product'])){
  $productIds = $_POST['product_id'];
  $quantities = $_POST['quantity'];
  // 循环处理每个商品
  foreach($productIds as $key => $pid){
    $qty = $quantities[$key];
    // 这里写你自己的业务逻辑，比如把商品ID和对应数量存入订单表等
    // 示例：插入数据库的逻辑
    // mysqli_query($db, "INSERT INTO order_items (order_id, product_id, quantity) VALUES ('$orderId', '$pid', '$qty')");
  }
}
?>

内容的提问来源于stack exchange，提问作者Rana