如何从两个选择的结果创建一个新变量

Question

因此，我希望从所选择的两个选项的结果中得到我的购物车页面的最终价格。我想你可以根据选择的内容创建一个新变量示例 - 如果Type = Canvas和Size = 50x25，价格变量将是50美元，这将显示在价格列下，如此 - 希望结果

我已经在我的产品页面上完成了这个操作，以便在选择了一个选项后创建一个价格但是这不会仅仅创建一个占位符变量。

 jQuery(function($){
     $("select[name='type'], select[name='size']").change(function(){
        var select = $(this);
        var $input = select.parent().find('input');
        if($input.length === 0){
          $input = $('<input>');
        }
        if(select.val() === "" && ""){
            $input.attr({ name: "none", placeholder: "", readonly: "readonly" , class: "abc"}).appendTo(select.parent());
        }
        else if(select.val() === "50x25" && "Canvas"){
            $input.attr({ name:"50x25Canvas" , placeholder: "$150", readonly: "readonly" , class: "abc" }).appendTo(select.parent());
        }
        else if(select.val() === "125x125" && "Canvas"){
            $input.attr({ name: "125x125Canvas", placeholder: "$175", readonly: "readonly" , class: "abc"}).appendTo(select.parent());
        }
   });
  });

有没有人有任何提示或链接，以帮助我学习如何创建这个感谢阅读！

编辑产品页面 -

  <form action="code/add_type.php<?php echo"?id=$photo_id" ?>" method="post">
<select class="form-control" name="type" style="width:25%;" required>
  <option value="">Type</option>
  <option value="Canvas">Canvas</option>
  <option value="Acrylic">Acrylic</option>
</select>
<select class="form-control" name="size" style="width:25%;" required>
  <option value="">Size</option>
  <option value="50x25">50x25</option>
  <option value="125x125">125x125</option>
</select>
<span class="final_price" name="finalPrice"></span>
<button class='btn btn-danger btn-m' type="submit" style="background-color:black; border-color:black; float: left;">Add to Cart</button>

添加类型页面 -

$photo_id = $_GET['id'];
$type = $_POST['type'];
$size = $_POST['size'];
$qty = $_POST['quantity'];
$price = $_POST['finalPrice'];

$type = mysqli_real_escape_string($conn, $type);
$size = mysqli_real_escape_string($conn, $size);
$qty = mysqli_real_escape_string($conn, $qty);
$price = mysqli_real_escape_string($conn, $price);

$query="INSERT INTO cart (type, size, qty, p_id, ip_add, price) VALUES ('$type','$size', '1', '$photo_id', '$ip_add', '$price')";

Answer 1

首先，你的if陈述没有意义

else if(select.val() === "50x25" && "Canvas"){

然后&& "Canvas"将永远是true因为你没有比较字符串与东西

但现在为您的解决方案

jQuery(function($){
     $("select[name='type'], select[name='size']").change(function(){
        var finalPrice = 0;
        var select = $(this);
        var $input = select.parent().find('input');
        if($input.length === 0){
          $input = $('<input>');
        }
        if(select.val() === "" && ""){
            finalPrice = 0;
            $input.attr({ name: "none", placeholder: "", readonly: "readonly" , class: "abc"}).appendTo(select.parent());
        }
        else if(select.val() === "50x25" && "Canvas"){
            finalPrice = 150;
            $input.attr({ name:"50x25Canvas" , placeholder: "$150", readonly: "readonly" , class: "abc" }).appendTo(select.parent());
        }
        else if(select.val() === "125x125" && "Canvas"){
            finalPrice = 175;
            $input.attr({ name: "125x125Canvas", placeholder: "$175", readonly: "readonly" , class: "abc"}).appendTo(select.parent());
        }
   });
  });

现在你得到了可以进一步使用的finalPrice变量。

在应显示最终价格的地方添加一个<span class="final_price"></span>

如果你不能添加这个span，你需要在那个地方找到一个html元素，你可以用下面的jQuery选择器来选择。

现在您可以使用以下内容更新最终价格：

$('.final_price').html(finalPrice);

您最有可能希望将finalPrice与数量相乘。

Answer 2

对于那些一直在寻找答案的人，我希望你在这里偶然发现它并且不必像我一样花几天时间来寻找这个...我编辑了我的产品页面以添加一个可以接收我的jquery变量的id

    <form action="code/add_type.php<?php echo"?id=$photo_id" ?>" method="post">


    <select class="form-control" name="type" style="width:25%;" required>
      <option value="">Type</option>
      <option value="Canvas">Canvas</option>
      <option value="Framed Print">Framed Print</option>
      <option value="Acrylic">Acrylic</option>
    </select>

    <select class="form-control" name="size" style="width:25%;" required>
      <option value="">Size</option>
      <option value="50x25">50x25</option>
      <option value="125x125">125x125</option>
      <option value="500x250">500x250</option>
    </select>

<div><input id="dyprice" value="" name="price" readonly></div>
    <hr>


    <button class='btn btn-danger btn-m' type="submit" style="background-color:black; border-color:black; float: left;">Add to Cart</button>
</form>

并对我的jquery进行了更改，以便我可以在我的页面上显示finalPrice变量，并为每个选择赋予它不同的值，然后将一个添加到购物车中的那个变量发送到我的数据库。

 $(document).ready(function(){
jQuery(function($){
   $("select[name='type'], select[name='size']").change(function(){
      var finalPrice = "";
      var select = $(this);
      if(select.val() === "" && ""){
          finalPrice = "";
      }else if(select.val() === "50x25" && "Canvas"){
          finalPrice = "150";

      else if(select.val() === "125x125" && "Acrylic"){
        finalPrice = "200";
      }
      else if(select.val() === "Acrylic" && "500x250"){
       finalPrice = "325";
      }
        $('#dyprice').val(finalPrice);
      });
    });
});

我希望这可以帮助别人。