如何从下拉列表中添加购物车价格

Question

我想在点击其中之一时添加价格

<div class="col-12 col-sm-9 col-md-9 col-lg-8">

                            <select class="form-control" type="text" value="">

                              <option value="0">Not Required</option>

                              <option value="50">Before Care only(6am to 9am)</option>

                              <option value="60">After Care Only (5pm to 7pm)</option>

                              <option value="110">Both</option>

                              </select>

                          </div>

应该添加他们的购物车总数

 <h4 class="price" id="prictot">{{$cdetail ->c_price}}</h4>

         <form action="{{ route('/payment') }}" id="theForm" method="POST">

          @csrf

          <input type="hidden" id="price" name="price" value="{{$cdetail ->price}}"><br>

          <button type="submit" class="btn radius-xl text-uppercase">Buy This Courses</button>

         </form>

使用ajax并获取值并放入“prictot”

<script>

$(document).ready(function() {

$("#priceadd").on('change', function () {

    var optionText = $("#priceadd option:selected").val();

     realprice=document.getElementById("prictot").innerHTML

    document.getElementById("prictot").innerHTML = optionText 

});

});

</script>

Answer 1

select-box您可以简单地获取和的值<h4>并将它们相加，并将总价值放入您的 div 和隐藏的输入中。IE ：$(document).ready(function() {//on change of slect&nbsp; $("#priceadd").on('change', function() {&nbsp; //get select value&nbsp; &nbsp; var optionText = parseInt($(this).val());&nbsp; &nbsp; //get text inside h4&nbsp; &nbsp; var realprice = parseInt($("#prictot").text());&nbsp; &nbsp; //add&nbsp;&nbsp; &nbsp; var total =optionText +&nbsp; realprice;&nbsp; &nbsp; //add total to div nd inputs&nbsp; &nbsp; $("#prictot").text(total)&nbsp; &nbsp; $("#price").val(total)&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="col-12 col-sm-9 col-md-9 col-lg-8">&nbsp; <select class="form-control" id="priceadd">&nbsp; &nbsp; <option value="0">Not Required</option>&nbsp; &nbsp; <option value="50">Before Care only(6am to 9am)</option>&nbsp; &nbsp; <option value="60">After Care Only (5pm to 7pm)</option>&nbsp; &nbsp; <option value="110">Both</option>&nbsp; </select></div><h4 class="price" id="prictot">110</h4><form action="{{ route('/payment') }}" id="theForm" method="POST">&nbsp; @csrf&nbsp; <input type="text" id="price" name="price" value="110"><br>&nbsp; <button type="submit" class="btn radius-xl text-uppercase">Buy This Courses</button></form><h4>如果您需要在其值发生更改之前获取内部已经存在的总数，您可以向<h4>标记添加一个自定义属性，该属性将具有以前的值。IE ：$(document).ready(function() {//on change of slect&nbsp; $("#priceadd").on('change', function() {&nbsp; &nbsp; //get old value&nbsp; &nbsp; var old_value = parseInt($("#prictot").attr('total-price'))&nbsp; //get select value&nbsp; &nbsp; var optionText = parseInt($(this).val());&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //add&nbsp;&nbsp; &nbsp; var total =optionText +&nbsp; old_value;&nbsp; &nbsp; //add total to div nd inputs&nbsp; &nbsp; $("#prictot").text(total)&nbsp; &nbsp; $("#price").val(total)&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="col-12 col-sm-9 col-md-9 col-lg-8">&nbsp; <select class="form-control" id="priceadd">&nbsp; &nbsp; <option value="0">Not Required</option>&nbsp; &nbsp; <option value="50">Before Care only(6am to 9am)</option>&nbsp; &nbsp; <option value="60">After Care Only (5pm to 7pm)</option>&nbsp; &nbsp; <option value="110">Both</option>&nbsp; </select></div><!--added custom attribute--><h4 class="price" total-price="110" id="prictot">110</h4><form action="{{ route('/payment') }}" id="theForm" method="POST">&nbsp; @csrf&nbsp; <input type="text" id="price" name="price" value="110"><br>&nbsp; <button type="submit" class="btn radius-xl text-uppercase">Buy This Courses</button></form>