从选择框中选择多个产品并输入每个选定产品的数量

Question

它是一个产品的简单 POS 系统。但现在我必须扩展多个产品。它的工作原理就像当我选择多个产品时，它会显示一个单独的框，其中写入了所选产品名称，同时还有一个输入数量框。是否可以通过 jquery 或 php 进行？如果有人帮助我整理一下，那将是一个很大的帮助

     <form method="POST" style="width:60%;margin-left:200px">
     <div class="form-group">
       <label>Choose Product:</label>
          <select name="product_id" class="form-control" class="select" id="select_items" multiple > 
             <option disabled selected>-- Select Product --</option>
             <!-- to retrive data from database and show into dropdown  -->
             <?php
                 $db = mysqli_connect('localhost', 'root', '', 'login');
                 $records = mysqli_query($db, "SELECT * From products where deleted=0");  // Use select query here 
                 while($data = mysqli_fetch_array($records))
                 {
                 echo "<option value=". $data['id'] ." >" .$data['name'] ."    </option>";  // displaying data in option menu
                 }  
             ?>  
          </select>
                <label> Quantity: </label>
                <input type="text" name="quantity" class="form-control"  ID="txtName" placeholder="Enter Quantity" required=""  />  
                </div> 
                <button class="btn" name="submit-product" type="submit" ID="btnClick"  >Submit</button> 
      </form>

Answer 1

是的，可以使用 jQuery 来完成。

我们必须有一个使用 id 的数量选择区域的包装器，只需要有一个 onchange 事件监听器来选择。

当我们更改选择时，jQuery 函数调用，在该 jQuery 函数中，我们必须收集所有选择的选项，然后使用 for 循环，我们可以克隆数量包装内容并更改内容。

例如：

function populate() {
  $('#select_items :selected').each(function() {
    let html = '';
    html += '<div>';
    html +='<label> Quantity:'+$(this).text()+' </label>';
    html += '<input type="text" name="quantity[]" class="form-control" ID="txtName" placeholder="Enter Quantity" required="" val='+$(this).val()+' />';
    html += '</div>'
   
    $('#selected-quantity').append(html)
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" style="width:60%;margin-left:200px">
  <div class="form-group">
    <label>Choose Product:</label>
    <select name="product_id" class="form-control" class="select" id="select_items" multiple onchange="populate()">
      <option disabled selected>-- Select Product --</option>
      <option value="foo1">foo1</option>
      <option value="foo2">foo2</option>
      <option value="foo3">foo3</option>
      <option value="foo4">foo4</option>
      <option value="foo5">foo5</option>
    </select>
    <div id="selected-quantity">
      
    </div>
  </div>
  <form>