Question

因此，我正在建立一个电子商务风格的网站，人们可以在这里购买智能手机。在这个网站上，我有一个结帐表格，用户可以在其中选择他们想要选择的电话，然后根据数量，表格显示用户的总费用。但是，由于我使用下拉选项，因此我不确定如何获取电话的价值，将其乘以数量并在底部显示总成本。

<?php
$data = echo '<script>document.write(sessionStorage.getItem("name"))</script>';

?>

Answer 1

对选择的内容进行一些细微的编辑以包含属性，因此其外观如下：

<select id="phoneList">
    <option value="iphone1.jpg" data-cost="100">Apple iPhone 11 Pro Max (2019) 512GB Silver</option>
    <option value="iphone2.jpg" data-cost="200">Apple iPhone 11 (2019) 128GB Black</option>
    <option value="iphone3.jpg" data-cost="300">Apple iPhone 11 (2019) 256GB White</option>
</select>

然后通过使用

获取上面定义的选定索引和数据成本

var i = phoneList.selectedIndex;
var phoneCost = document.getElementById("phoneList").getElementsByTagName("option")[i].getAttribute("data-cost");

您可以获取所选手机的费用。

然后将手机成本乘以

的数量

document.getElementById("quantity").value;

并将其显示在页面上的某个位置。

因此，当用户在下拉菜单中选择一个选项时，将按

行调用函数

<script>
function CalcCosts() {
    //Get user selected items
    var i = phoneList.selectedIndex;
    var phonecost = document.getElementById("phoneList").getElementsByTagName("option")[i].getAttribute("data-cost");
    var quantity = parseInt(document.getElementById("quantity").value);

    //Display on page
    document.getElementById("PLACETODISPLAY").innerHTML = phonecost * quantity;
}
</script>

您可以使用下拉菜单的onclick调用函数，如下所示

<select id="quantity" onclick="CalcCosts()">
    <p>Quantity</p>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

编辑：包括评论中的建议。

签出表格以计算物品总成本

1 个答案: