如何将隐藏值从下拉选择传递到表单？

Question

我已经将值从表中提取到下拉列表中，现在在表中有3列

名称类型价格轿车1000轿车Hatchback 1500 

因此，在下拉列表中，我会在下拉列表中找到“类型”，并且基于该下拉列表，我需要在用户选择vechile类型并单击“提交”后，价格也应填写在付款表格中。

我试图将下拉值转换为表格，但相关选择的价格无法获取。

<form method="post" class="cart" action="Booking_form.php">

     <div class="quantity btn-quantity pull-left m-r10">

          <select name="vechile_type" class="form-control">

                <option>Select Vechile</option>

                <option value="Hatchback">Hatchback</option>

                <option value="Sedan">Sedan</option> 

          </select>

     </div>

     <button class="btn btn-primary site-button pull-left"><i class="fa"></i> Book Now</button>

我希望在任何vechile类型的下拉选择中，数量也应在后端流程中选择，并在预订表格中显示vechile类型和价格。现在仅显示vechile类型。

Answer 1

您可以这样：<form method="post" class="cart" action="Booking_form.php">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="quantity btn-quantity pull-left m-r10">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name="vechile_type" class="form-control veh_type">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">Select Vechile</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Hatchback" data-price="1500">Hatchback</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Sedan" data-price="1000">Sedan</option>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="hidden" name="price" class="hidd_price">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button class="btn btn-primary site-button pull-left"><i class="fa"></i> Book Now</button>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; $(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp;$('body').on('change', '.veh_type', function(e){&nbsp; &nbsp; &nbsp; &nbsp; if($(this).val() != ''){&nbsp; &nbsp; &nbsp; &nbsp; $('.hidd_price').val($(this).find('option:selected').attr("data-price"));&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.hidd_price').val('');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; </script>