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

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">

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

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

                    <option value="">Select Vechile</option>

                    <option value="Hatchback" data-price="1500">Hatchback</option>

                    <option value="Sedan" data-price="1000">Sedan</option> 

              </select>

             <input type="hidden" name="price" class="hidd_price">

         </div>

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

    <script>

      $(document).ready(function () {

       $('body').on('change', '.veh_type', function(e){

        if($(this).val() != ''){

        $('.hidd_price').val($(this).find('option:selected').attr("data-price"));

        }else{

            $('.hidd_price').val('');

        }

    });

    });

    </script>